JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<p id="text">INPUTINPUT11.FACTOR+(I1.REV-Average(I1.UNIT)*Pi()) MOD 5.59</p>

CSS

.highlight_0 {
    color: #ff0000;
}
.highlight_1 {
    color: #00ff00;
}
.highlight_2 {
    color: #0000ff;
}

JavaScript

(function() {
		const expression = 'INPUTINPUT11.FACTOR+(I1.REV-Average(I1.UNIT)*Pi()) MOD 5.59 A. dI1.REV .R 2';
        
    const oldTerm = 'I1.REV';
    const newTerm = 'Q3.TER';
    const oldTermEscaped = oldTerm.replace('.', '\\.');
    //const regexp = new RegExp(`[^_A-Z0-9\\.](${oldTermEscaped})[^_A-Z0-9\\.]`, 'gimu');
    const regexp = new RegExp(`\\b(${oldTermEscaped})\\b`, 'gimu');
    const newExpression = expression.replace(regexp, (_0, match, $2, $3) => {
    console.log(_0);
    console.log(match);
    console.log($2);
    console.log($3);
    
      if (match === oldTerm) {
        return newTerm;
      }
      return _0;
    });    
        
        
        console.log(newExpression);
        
        
    /*console.log(text.replace(/[^A-Z0-9\.](I1\.REV)[^A-Z0-9\.]/gmui, ($1, $2) => {
    	console.log($1);
      console.log($2);
    
    })); */
    /* console.log($1,$2,$3);
      if (!$2) {
        return $1;
      }
      const colorIndex = words.indexOf($3);
      if (colorIndex === -1) {
        return $1;
      }
      const span = document.createElement('span');
      span.className = `highlight_${colorIndex}`;
      span.appendChild(document.createTextNode($2));
      span.innerHtml = $2;
    
      return `|${$1}|`;
    });
    
    document.getElementById('text').after(newText); */
})();