Replace Text Node with HTML span content

Question

I should write an extension that can change a color for a word in web page, this code can replace words but can't change their background color

See below code : content.js

walk(document.body);

function walk(node)  
{

    var child, next;

    switch ( node.nodeType )  
    {
        case 1: 
        case 9:  
        case 11: 
            child = node.firstChild;
            while ( child ) 
            {
                next = child.nextSibling; 
                walk(child);
                child = next;
            }
            break;

        case 3: 
            handleText(node);
            break;
    }
}

function handleText(textNode) 
{
    var v = textNode.nodeValue;

    v = v.replace(/Apple/gi, '<span class="red">Pineapple</span>');

    textNode.nodeValue = v;
}

How to apply <span class="red"> for pineapple?

It's unclear what your are asking here please refer to [Ask New Question](https://stackoverflow.com/help/how-to-ask) and ask your question correctly — Bourbia Brahim, Feb 28 '18 at 13:23
not sure about your question. do you have a class named red in your file? if not then create it, otherwise apply directly here like `Pineapple` — Suresh Ponnukalai, Mar 01 '18 at 05:38
Does this answer your question? [Replace a textNode with HTML text in Javascript?](https://stackoverflow.com/questions/15553280/replace-a-textnode-with-html-text-in-javascript) — Jo Liss, May 24 '23 at 14:53

score 2 · Answer 1 · answered Feb 28 '18 at 21:49

because of you're accessing a TextNode not a HTML node the replaced text will be a text and not parsed as html

So just access your element as Html node (node.nodeType == 1 ) Node.ELEMENT_NODE (see in doc ) , then get it's innerHTML and replace it with new innerHTML

See below Snippet :

walk(document.body);

function walk(node) {

  var child, next;
  switch (node.nodeType) {

    case 1:
      handleText(node);
      break;
    case 9:
    case 11:
      child = node.firstChild;
      while (child) {
        next = child.nextSibling;
        walk(child);
        child = next;
      }
      break;

    case 3:
      break;
  }
}

function handleText(node) {
  var v = node.innerHTML;
  v = v.replace(/Apple/gi, '<span class="red">Pineapple</span>');
  node.innerHTML = v;
}

.red {
  color: red;
  font-weight: bold;
}

<div>
  Apple dsqd sqd qsd Apple sqd sqd Apple
  <p>Apple is an apple and it's an apple </p>
  <p><span>Apple also is an PeanApple</span></p>
  <div>
    what you think about
    <p>
      Apple now !
    </p>
  </div>
</div>

Also Fiddle

This works great, except that attributes in the htmlnode also get replaced. `This is an Apple`. How would you prevent that? — Kokodoko, Dec 13 '18 at 14:34
Hm, on second thought, this just parses the entire BODY element at once instead of parsing each individual DOM element. — Kokodoko, Dec 13 '18 at 15:25
@Kokodoko You're right , I'll try find other solution for that ,! — Bourbia Brahim, Dec 14 '18 at 10:08

score 0 · Accepted Answer · answered Feb 28 '18 at 16:16

0

If you put HTML into a nodeValue it will be escaped. Try:

textNode.parentElement.innerHTML = 'This <strong>accepts</strong> HTML';

answered Feb 28 '18 at 16:16

janosrusiczki

1,920
2
20
41

1

+i can't :( my reputation 11 when i get 15 i upvote your comment) – Nikoloz Bokeria Feb 28 '18 at 16:26

score 0 · Answer 3 · answered Jul 04 '22 at 22:38

I don't like textNodes in my code and I normalize everything to span elements like this:

// text-nodes-to-span.js v1
function textNodesToSpan(elements, recursive) {
    recursive = recursive || true;
    if (!('length' in elements)) { // to array
        elements = [elements];
    };
    for (let node of elements) {
        if (node.nodeType === 3) {
            let span = document.createElement('span');
            span.textContent = node.textContent;
            node.parentElement.insertBefore(span, node);
            node.remove();
        } else if (recursive) {
            textNodesToSpan(node.childNodes);
        };
    };
};

Replace Text Node with HTML span content

3 Answers3