JSFiddle - React, Tailwind, and code Playground

HTML

<div lang="fa">
    0123456789
    <div>
        54         
        <span id=test1>1234567890</span>           
        <input id=test2 value=1234567890 />


        676
    </div>
    10000
</div>

CSS

div {
    font-family: monospace;
    font-size: 18px;
}

span {
    color: #0000ff;
}

JavaScript

//before the DOM change, test1 holds a numeral parseInt can understand
    alert("Before: test holds the value:" +parseInt($("#test1").text()));

    function convertNumChar(c) {
       return String.fromCharCode(c.charCodeAt(0) + 0x0630);
    }

    function convertNumStr(s) {
        return s.replace(/\d/g, convertNumChar);
    }

    //the change in the DOM
    $("[lang='fa']").find("*").andSelf().contents()
        .each(function() {
            if (this.nodeType === 3)        
               this.nodeValue = convertNumStr(this.nodeValue);      
        })
        .filter("input:text,textarea")
        .each(function() {
             this.value = convertNumStr(this.value)
         })
         .change(function () {this.value = convertNumStr(this.value)});      

    //test1 now holds a numeral parseInt cannot understand
    alert("After: test holds the value:" +parseInt($("#test1").text()))