0

我是 javascript 新手，如果你能帮助我解决我面临的这个问题，那就太好了。在下面的 HTML 代码中，我试图突出显示一个特定的单词（比如“消息”），方法是通过附加到该单词以使其变为粗体来替换该单词。

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

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

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

问题是现在我无法保留文本上方的图像，并且新正文中只有 textContent 的值，并且图像丢失了。这是我使用的 JS（但现在我用单词 phone 替换 message）。

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

有没有其他方法可以替换直接放在正文下方的文本，它也有其他元素？

4

3 回答 3

2

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

像这样的东西：

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

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

于 2013-01-21T12:18:01.113 回答
0

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

如果您设置 textContent 属性，则所有子节点都将被删除并替换为包含指定字符串的单个 Text 节点。

参考这里

于 2013-01-21T12:08:53.457 回答
0

尝试

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');
    }
}
于 2013-01-21T12:26:34.330 回答