Question

是否可以使用JavaScripts replace函数在HTML页面中插入span标签？

我看过一些脚本示例，这些脚本可以使用类似以下内容的东西来更改html文件中的单词：

var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/originalword/gi, 'Different Words');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

但是，当我尝试添加span标签并更改原始或新单词的字体颜色时，它只是以span标签显示为文本。

    var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/originalword/gi, '<span style="color:blue;"> originalword </span>');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

是否不能像这样插入span标签？还是我做错了什么？

Answer 1

createTextNode：创建一个新的Text节点。此方法可用于转义HTML字符，这就是您的跨度在HTML中可见而不是像HTML那样起作用的原因。

相反，您可以使用innerHTML替换文本，如下所示。

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/originalword/gi, '<span style="color:blue;"> originalword </span>');

            if (replacedText !== text) {
                element.innerHTML = replacedText;
            }
        }
    }
}

<div>This is an example text which is used to check the replace functionality of JS. It will replace originalword with span tag.</div>

Answer 2

是的，可能

t.innerHTML = t.innerHTML.replace(/(orgword)/gi,"<span class='em'>$1</span>");

.em { color: red; }

<div id="t">Some text orgword foo bar ORGword buzz</div>

使用javascript替换插入<span>标签

2 个答案: