Regular expression to avoid replace part of html tag

Question

For example , I have a string <i class='highlight'>L</i>olopolo . And I need to change the letter l to <i class='highlight'>l</i>. How to make a regular expression to ignore the tag and everything inside?

Answer 1

Try this:

var string = "<i class='highlight'>L</i>olopolo";
string = string.replace(/l(?![^>]+>)(?![^<]*<\/)/g, "<i class='highlight'>l</i>");
alert(string);

if you want to have arbitrary text then you can use the code below:

var text = "foo";
var re = new RegExp(text + '(?![^>]+>)(?![^<]*</)', 'g');
var string = "<i class='highlight'>foobar</i>foobarfoobar";
string = string.replace(re, "<i class='highlight'>" + text + "</i>");
alert(string);

Answer 2

As mentioned using regular expressions is not the best idea so the next best thing is to loop over text nodes and add the elements.

var charSplit = "l";
var elem = document.querySelector(".x");
var nodes = elem.childNodes;
for(var i=nodes.length-1;i>=0;i--){
   var node = nodes[i];
   if(node.nodeType === 3) {  //this is a text node
       var last = node;       
       var parts = node.nodeValue.split(charSplit);  //split of the character we are supposed to match
       node.nodeValue = parts[parts.length-1];  //set text node value to last index's value
       for (var j=parts.length-2; j>=0;j--){  //loop backwards ingnoring the last index since we already put that text in the textode
           var it = document.createElement("i");  //create the new element to add
           it.className="highligt";
           it.innerHTML = charSplit;
           node.parentNode.insertBefore(it,last);  //add it before the text node
           var tx = document.createTextNode(parts[j]);  //create new text node for text that becomes before the element
           node.parentNode.insertBefore(tx,it);  
           last = tx;
       }
   }
}

<p class="x"><i class='highlight'>L</i>olopolo</p>

Answer 3

I would suggest something like this, with minimal (and not so complicated) regex usage. If your string is initially part of html -> you can get parent(s), and change textContent and innerHTML:

tag=document.getElementsByTagName('p')[0]; /*just as example,can be anything else*/
str=tag.textContent;
reg=/(l)/gi;
tag.innerHTML=str.replace(reg,"<i class='highlight'>"+'$1'+"</i>");

Demo: http://jsfiddle.net/LzbkhLx7/

P.S. Explanation - textContent will give you 'pure' string/text, without HTML tags - and then you can easily wrap every occurrence of l/L.

Answer 4

document.getElementsByClassName("highlight")[0].innerHTML = "l";

No need for regex.

Or if you want to change the letter from upper to lower case

var el = document.getElementsByClassName("highlight")[0];
el.innerHTML = el.innerHTML.toLowerCase();

Of course you'll have to make sure you can call toLowerCase (or other method) on the innerHTML before doing it.