Question

我是javascript的新手，如果你可以帮我解决这个问题，我会很高兴。在下面的HTML代码中，我试图突出显示一个特定的单词（比如“message”），通过将其替换为单词来使其变为粗体。

<body>
  <img src="http://some.web.site/image.jpg" title="abcd" />
  This is a test message.
</body>

字符串“这是测试消息”直接在body元素中找到（因此没有id，因此不能使用getElementById来提取文本）。

所以我得到了整个body元素并使用textContent提取了文本。（这给了我文本并忽略了html中文本上方的图像。）然后在突出显示单词后，我将'body的textContent设置回新的String。

问题在于，现在我无法保留文本上方的图像，并且新主体仅包含textContent的值，并且图像丢失。这是我使用的JS（但现在我用单词phone替换了消息）。

<script>
function myFunction(){
  var x = document.getElementsByTagName('body')[0].textContent;
  var v = x.replace("message","phone");
  document.getElementsByTagName('body')[0].textContent = v;
} 
</script>

还有其他方法可以替换直接放在正文下方的文本吗？还有其他元素吗？

Answer 1

为了做这样的事情，你需要遍历文档中的所有文本节点，搜索单词并将其包装。

这样的事情：

function highlight(str,node) {
    if( !node) node = document.body;
    var c = node.children, l = c.length, i, p;
    for( i=0; i<l; i++) {
        if( c[i].nodeType == 1) highlight(str,c[i]);
        if( c[i].nodeType == 3) {
            if( (p=c[i].data.indexOf(str)) > -1) {
                c[i].splitText(p);
                c[i].nextSibling.deleteData(0,str.length);
                c[i].parentNode.insertBefore(
                    document.createElement('b'),c[i].nextSibling
                ).appendChild(document.createTextNode(str));
            }
        }
    }
}

应该这样做。要使用，只需使用您想要的任何文本调用highlight("message")即可。请注意，这将区分大小写 - 如果您需要无箱匹配，请告诉我，我会进行编辑以将其考虑在内（尽管大多数情况下您可能会使用highlight("message"); highlight("Message");）

此外，您可以将搜索范围限制为特定元素。假设您有<div id="replace-me">，您可以将搜索限制为该元素，如下所示：

highlight("message",document.getElementById('replace-me'));

（您可以使用任何方式获取节点，这是最简单的）

Answer 2

textContent属性设置或返回指定节点及其所有后代的文本内容。

如果设置textContent proerty，则会删除所有子节点，并将其替换为包含指定字符串的单个Text节点。

参考here

Answer 3

尝试

var children = document.body.childNodes;
for(var len = children.length, child=0; child<len; child++){
    if (children[child].nodeType === 3){ // textnode
        var contents = children[child].nodeValue;
       children[child].nodeValue = contents.replace(/message/gi, 'phone');
    }
}

替换中的文本

3 个答案: