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  for pineapple?

It's unclear what your are asking here please refer to Ask New Question and ask your question correctly — Bourbia Brahim
– Bourbia Brahim, Commented Feb 28, 2018 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
– Suresh Ponnukalai, Commented Mar 1, 2018 at 5:38
Does this answer your question? Replace a textNode with HTML text in Javascript? — Jo Liss
– Jo Liss, Commented May 24, 2023 at 14:53

Bourbia Brahim · Accepted Answer · 2018-02-28 21:49:11Z

2

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

answered Feb 28, 2018 at 21:49

Bourbia Brahim

14.7k4 gold badges45 silver badges55 bronze badges

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

3 Comments

Kokodoko Over a year ago

This works great, except that attributes in the htmlnode also get replaced. This is an Apple. How would you prevent that?

Kokodoko Over a year ago

Hm, on second thought, this just parses the entire BODY element at once instead of parsing each individual DOM element.

Bourbia Brahim Over a year ago

@Kokodoko You're right , I'll try find other solution for that ,!

janosrusiczki · Accepted Answer · 2018-02-28 16:16:21Z

0

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

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

answered Feb 28, 2018 at 16:16

janosrusiczki

1,9313 gold badges21 silver badges43 bronze badges

1 Comment

Nikoloz Bokeria Over a year ago

+i can't :( my reputation 11 when i get 15 i upvote your comment)

Luis Lobo · Accepted Answer · 2022-07-04 22:38:00Z

0

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);
        };
    };
};

answered Jul 4, 2022 at 22:38

Luis Lobo

9097 silver badges11 bronze badges

Collectives™ on Stack Overflow

Replace Text Node with HTML span content

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related