javascript - 使用 JavaScript 将 HTML 插入文本节点

Question

我有一个小文本节点:

var node

我想在每次出现的“lol”周围包裹一个跨度。

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

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

Answer 1

Andreas Josas 给出的答案非常好。然而，当搜索词在同一文本节点中多次出现时，代码存在多个错误。这是修复了这些错误的解决方案，此外，插入内容被分解到 matchText 中，以便于使用和理解。现在，只有新标签在回调中构造，并通过返回传回 matchText。

更新了 matchText 函数并修复了错误:

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

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

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

                newTextNode.data = newTextNode.data.substr(all.length);
                tag = callback.apply(window, [child].concat(args));
                child.parentNode.insertBefore(tag, newTextNode);
                child = newTextNode;
            });
            regex.lastIndex = 0;
            break;
        }

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

如果您希望插入 anchor (链接)标签而不是span标签，请将create元素更改为“a”而不是“span”，添加一行以将href属性添加到标签中，然后添加“a”到排除元素列表，这样就不会在链接内创建链接。