Converting a Text NodeType into an Element in Javascript

Question

This is sort of a continuation of an earlier question.

I have some html.

<h3>things that are red:</h3>
<ul>
   <li><a href="html://www.redapples.com">Red Apples</a></li>
   <li><a href="html://www.redmeat.com">Red Meat</a></li>
   <li><a href="html://www.redcar.com">All Red Cars</a></li>
</ul>

I want to use javascript to wrap all of the text elements with a element

The result I am looking for.

<h3>things that are <span class="red">red</span>:</h3>
<ul>
   <li><a href="html://www.redapples.com"><span class="red">Red</span> Apples</a></li>
   <li><a href="html://www.redmeat.com"><span class="red">Red</span> Meat</a></li>
   <li><a href="html://www.redcar.com">All <span class="red">Red</span> Cars</a></li>
</ul>

After a lot of thought I realized that I had to distinguish between text nodeTypes and Element NodeTypes while navigating the DOM. I used some of the feedback from my earlier question, and wrote this little script.

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

walkTheDOM(document.body, function (node) {
// Is it a Text node?       
if (node.nodeType === 3) { 
    var text = node.data.trim();
    // Does it have non white-space text content?       
    if (text.length > 0) {              
        node.data = text.replace(/(RED)/gi, '<span class="red">$1</span>'); 
    }
}
});

This does pretty much what I want it to do, except the output is text rather than html. So my question is this, is there an easy way to fix this line

node.data = text.replace(/(RED)/gi, '<span class="red">$1</span>');

So that the output is html?

node.innerHTML = text.replace... Shouldn't have been very difficult to research this yourself — charlietfl
– charlietfl, Commented Sep 16, 2014 at 1:35
@charlietfl: That will break for <li>>/li< bug</li>, for example, unless you make sure to reencode things. document.createElement way is safer (but definitely more cumbersome). — Amadan
– Amadan, Commented Sep 16, 2014 at 1:37
Are you sure the innerHTML is an object at this level? I've tried adding it, and I get nothing. — increase Mather
– increase Mather, Commented Sep 16, 2014 at 1:45
@charlieftl Yeah, innerHTML isn't a property of Text Objects. So the question remains, is there an easy way convert a text object into an html object. — increase Mather
– increase Mather, Commented Sep 16, 2014 at 1:53

Amadan · Accepted Answer · 2014-09-16 02:18:34Z

7

What you need to do to make this generic, as I have hinted in the comment, is to create a new element, put the text node into it, then replace the text node with the new element.

function wrapTextNode(textNode) {
    var spanNode = document.createElement('span');
    spanNode.setAttribute('class', 'red');
    var newTextNode = document.createTextNode(textNode.textContent);
    spanNode.appendChild(newTextNode);
    textNode.parentNode.replaceChild(spanNode, textNode);
}

[].forEach.call(document.querySelectorAll('a'), function(el) {
    var textNode = el.childNodes[0];
    wrapTextNode(textNode);
});

EDIT: fiddle

answered Sep 16, 2014 at 2:18

Amadan

200k23 gold badges253 silver badges321 bronze badges

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

2 Comments

Zaif Senpai Over a year ago

Great. How to do its reverse? That is, replace span.red with its text node.

Amadan Over a year ago

Per SO rules, one question per question. So, make a new question; feel free to link it here if you want. But basically, run cloneNode on the text node, use after to insert it after its parentNode, then remove the old parent node.

PeterKA · Accepted Answer · 2014-09-16 01:38:50Z

0

DEMO

$(function() {
    $('li a').html(function(i,html) {
        return html.replace(/(RED)/gi, '<span class="red">$1</span>');
    });
});

answered Sep 16, 2014 at 1:38

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

3 Comments

increase Mather Over a year ago

I would love to go that way, but I for a lot of reasons I need to go only on text elements which means I can't narrow it down by 'li a' selectors. And if I just go straight to the 'li' selector the replace wraps the 'red' in the href link which is why I resorted to using the DOM.

PeterKA Over a year ago

If you intend to manipulate text nodes just bear in mind that the result will always be text; therefore any tags would < and > would be escaped, as is the case in your result. To manipulate HTML you have to start off with HTML.

increase Mather Over a year ago

Thanks. That's the best answer so far. I was beginning to suspect that.

Eric Aya · Accepted Answer · 2021-08-20 13:57:44Z

The answer from Amadan is perfect to manipulate (convert from textnode to element for css purposes) for instance some VAT-text-information in the cart-totals section on the cart page in the storefront-child-theme in woocommerce in wordpress. There is no other usual or better way of changing this little piece of textnode that lies within a div containing different textnodes and elementnodes. So i wanted to say thanks for this solution.

Of course, this only works if you use only one language.

var cart_totals = document.querySelector(".cart_totals .shop_table");
if( !!cart_totals ) {
  for( var x = 0; x < cart_totals.childNodes.length; x++ ) {
    if( cart_totals.childNodes[x].nodeType === 3 && 
        cart_totals.childNodes[x].nodeValue.includes( 'inkl. 19 % MwSt.' ) ) {
      var textNode = cart_totals.childNodes[x];
      wrapTextNode( textNode ); /* see function from Amadan above */
    }
  }
}

Collectives™ on Stack Overflow

Converting a Text NodeType into an Element in Javascript

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related