Convert string after replace in html DOM element in the same position

Question

I Have a Node from DOM, in this node I find a string and I replace it before and after with open/close span tag in this way:

   tmp(node){
    if (node.nodeType === 3) { // Node.TEXT_NODE
      var text = node.data.replace(/In eterni Dei/, "<span>In eterni Dei<span>");
      if (text != node.data)
          node.data = text;
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i = 0; i < node.childNodes.length; i++) {
            this.tmp(node.childNodes[i]);
        }
    }
  }

This solution work but replace only the string, I need that the replacement can convert my replaced string in HTML DOM elements in the same position

Greedo · Accepted Answer · 2020-10-26 08:41:17Z

1

You can use innerHTML to read the whole HTML content at once and then do a mass replacement. changes in the innerHTML will be computed

function tmp(node){
      var text = node.innerHTML.replace(/In eterni Dei/g, "<span>In eterni Dei</span>");
      if (text != node.innerHTML)
          node.innerHTML = text;
          
      console.log(node.innerHTML)
  }
  
  tmp(document.getElementById("div"));

<div id="div">
  In eterni Dei
  <div>
    In eterni Dei
   </div>
</div>

answered Oct 26, 2020 at 8:41

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2020-10-26 08:36:03Z

1

To modify the markup you should use innerHTML property of the element:

var text = node.data.replace(/In eterni Dei/, "<span>In eterni Dei<span>");
node.innerHTML = text;

answered Oct 26, 2020 at 8:36

Mamun

69k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Convert string after replace in html DOM element in the same position

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related