JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

txt: <input type="text" id="txt" value="(021 65) 9202 - 0459" /> <br/>
src: <input type="text" id="src" value="59" /> <br/>
result: <div id="res" >   </div>

JavaScript

function paint(txt, search, ncF, cF) {

    function isNumber (c){ return !!/^[0-9]$/.exec(c); }
    
    var response = [
        { color: "black", txt: '' }
    ];
    
    var rIndex = 0;
    var sIndex = 0;
    
    var atual = "";
    debugger;
    for(var i = 0; i < txt.length; i++){
        
        var c = txt[i];
        
        if( !isNumber(c) ){
            atual += c;
            continue;
        }
        
        if( sIndex < search.length ){
            
            atual += c;
            if( c == search[sIndex] ){
                
                sIndex++;
                
            }else{
                sIndex = 0;
                response[rIndex].txt += atual[0];
                i -= atual.length - 1;
                atual = "";
                
            }
            continue;
        }else{
            response.push({ color: "blue", txt: atual });            
            response.push({ color: "black", txt: c });
            atual = "";
            rIndex += 2;
            sIndex = 0;
        }
        
    }
    
    if( atual.length ){
        
        if( sIndex < search.length ){
            reponse[rIndex].txt += atual;        
        }else{
            response.push( { txt: atual, color: "blue" });     
        }
        
    }
    
    return response;
}

var txtField = document.querySelector("#txt");
var srcField = document.querySelector("#src");
var resField = document.querySelector("#res");

function atualizar(){
    
var res = paint(txtField.value, srcField.value);
 resField.innerHTML = "";
for(var i = 0; i < res.length; i++){

    resField.innerHTML += "<span style='color:"+res[i].color+"' >"+res[i].txt+"</span>";

}

}


txtField.addEventListener("blur",atualizar);
srcField.addEventListener("blur",atualizar);