用JavaScript将HTML插入文本节点

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (54)

我有一个小文本节点:

var node

我想把每一个“LOL”的出现都围起来。

node.nodeValue = node.nodeValue.replace(/lol/, "<span>lol</span>")

它打印出来"<span>lol<span>"当我想"lol"作为一个跨度元素。

提问于
用户回答回答于

你可能需要node要成为父节点,您只需使用innerHTML:

node.innerHTML=node.childNodes[0].nodeValue.replace(/lol/, "<span>lol</span>");

这儿node.childNodes[0] refers to the actual text node, and node是它包含的元素。

用户回答回答于

下面的文章给出了用HTML元素替换文本的代码:

http://blog.alexanderdickson.com/javascript-replacing-text

来自该条:

var matchText = function(node, regex, callback, excludeElements) { 

    excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
    var child = node.firstChild;

    do {
        switch (child.nodeType) {
        case 1:
            if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1) {
                continue;
            }
            matchText(child, regex, callback, excludeElements);
            break;
        case 3:
           child.data.replace(regex, function(all) {
                var args = [].slice.call(arguments),
                    offset = args[args.length - 2],
                    newTextNode = child.splitText(offset);

                newTextNode.data = newTextNode.data.substr(all.length);
                callback.apply(window, [child].concat(args));
                child = newTextNode;
            });
            break;
        }
    } while (child = child.nextSibling);

    return node;
}

用法:

matchText(document.getElementsByTagName("article")[0], new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
    var span = document.createElement("span");
    span.className = "search-term";
    span.textContent = match;
    node.parentNode.insertBefore(span, node.nextSibling); 
});

And the explanation:

从本质上讲,正确的做法是…

  1. 遍历所有文本节点。
  2. 在文本节点中查找子字符串。
  3. 在偏置处把它分开。
  4. 在拆分之间插入SPAN元素。

扫码关注云+社区

领取腾讯云代金券