replaceText()

by Adi Jaya

HTML

<article class="article1">
  <p>
      Lorem javascript javaScript Ipsum Dolor Sit Amet <b>html</b> <em>css</em> htmlx
  </p>
  <p>
      Lorem Ipsum  css  Dolor Sit php <code>XML</code> hello3 html htmlcssjavascript 
  </p>
</article>

<hr>

<article class="article2">
  <p>
      Lorem javascript javaScript Ipsum Dolor Sit Amet <b>html</b> <em>css</em> htmlx
  </p>
  <p>
      Lorem Ipsum  css  Dolor Sit php <code>XML</code> hello3 html htmlcssjavascript 
  </p>
</article>

<hr>

<article class="article3">
  <p>
      Lorem javascript javaScript Ipsum Dolor Sit Amet <b>html</b> <em>css</em> htmlx
  </p>
  <p>
      Lorem Ipsum  css  Dolor Sit php <code>XML</code> hello3 html htmlcssjavascript 
  </p>
</article>

<hr>

<article class="article4">
  <p>
      Lorem javascript javaScript Ipsum Dolor Sit Amet <b>html</b> <em>css</em> htmlx
  </p>
  <p>
      Lorem Ipsum  css  Dolor Sit php <code>XML</code> hello3 html htmlcssjavascript 
  </p>
</article>

CSS

a {
  text-decoration: none;
  color: blue;
}

code {
  color: red
}

.mark-green {
  background: green;
  color: #fff
}

JavaScript

function replaceText( obj ){
  var data = obj.data;
  var selector = document.querySelectorAll( obj.selector );
  data.forEach(function( val, index ){
    var reg = new RegExp("\\b" + val + "\\b", obj.flags );
    selector.forEach(function( elem, index2 ){
      var html = elem.innerHTML;
           html = html.replace( reg, obj.replace );
       elem.innerHTML = html;
    });
  });
}


/* DEMO */
replaceText({
  data: [ "javaScript", "html", "css", "php", "xml" ],
  selector: ".article1 p",
  flags: "gm", // g, i, m, gm, gim => https://javascript.info/regexp-introduction#flags
  replace: "<a href='https://example.com/search?q=$&' target='blank'>$&</a>"
});

replaceText({
  data: [ "javaScript", "html", "css", "php", "xml" ],
  selector: ".article2 p",
  flags: "gm",
  replace: "<mark>$&</mark>"
});


replaceText({
  data: [ "javaScript", "html", "css", "php", "xml" ],
  selector: ".article3 p",
  flags: "gim",
  replace: "<mark class='mark-green'>$&</mark>"
});

replaceText({
  data: [ "javaScript", "html", "css", "php", "xml" ],
  selector: ".article4 p",
  flags: "gim",
  replace: "#####"
});