在Javascript中将Text NodeType转换为Element

Converting a Text NodeType into an Element in Javascript

本文关键字：转换 Element NodeType Text Javascript 中将      更新时间：2023-09-26

这是前面一个问题的延续。

我有一些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>

我想使用javascript用元素包装所有的文本元素

我正在寻找的结果。

<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>

经过深思熟虑，我意识到在导航DOM时必须区分文本节点类型和元素节点类型。我使用了之前问题中的一些反馈，并编写了这个小脚本。

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

这几乎完成了我希望它做的事情，只是输出是文本而不是html。所以我的问题是，有没有一个简单的方法来修复这条线

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

所以输出是html？

正如我在评论中所暗示的，要使其通用，需要做的是创建一个新元素，将文本节点放入其中，然后用新元素替换文本节点。

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

编辑：小提琴

DEMO

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

Amadan的答案非常适合操作（出于css目的，从文本节点转换为元素），例如wordpress中的wooccommerce中店面子主题中购物车页面的购物车汇总部分中的一些增值税文本信息。没有其他常见或更好的方法可以更改位于包含不同文本节点和元素节点的div中的这一小段文本节点。所以我想对这个解决方案表示感谢。

当然，只有当你只使用一种语言时，这才有效。

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 */
    }
  }
}
相关文章：