JSFiddle - React, Tailwind, and code Playground

HTML

<style>
div { font-size:50px}
span {color:red}
</style>

<script>
str = "foo ١٢٣ ٤٥٦٧٨٩٠١٢٣٤٥٦٧٨٩ bar"

String.prototype.reverse = function() { return this.split("").reverse().join("") }
result = str.replace(/[\u0660-\u0669]+/g, function(s) {
	return s.
		reverse().
		replace(/(..)(.)/g, "$1aaa$2zzz").
		reverse().
		replace(/zzz(.)aaa/g, "<span>$1</span>")
})
document.write("<div dir='rtl'>" + str + "</div>")
document.write("<div dir='rtl'>" + result + "</div>")
</script>