Javascript 替换<；车身>；_Javascript_Html

Javascript 替换<；车身>；

javascript html

Javascript 替换<；车身>；,javascript,html,Javascript,Html,我是javascript新手，如果您能帮助我解决我面临的这个问题，我将非常高兴。在下面的HTML代码中，我试图突出显示一个特定的单词（比如“message”），方法是将该单词添加到后面，使其加粗 <body> <img src="http://some.web.site/image.jpg" title="abcd" /> This is a test message. </body> 这是一条测试消息。字符串“thisatestmessag

我是javascript新手，如果您能帮助我解决我面临的这个问题，我将非常高兴。在下面的HTML代码中，我试图突出显示一个特定的单词（比如“message”），方法是将该单词添加到后面，使其加粗

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


这是一条测试消息。

字符串“thisatestmessage”直接在body元素中找到（因此没有id，因此不能使用getElementById提取文本）

因此，我得到了整个body元素，并使用textContent提取了文本（这给了我文本，并忽略了html中文本上方的图像）然后在突出显示单词后，我将“body”的textContent设置回新字符串

问题是，现在我无法保留文本上方的图像，新的正文中只有文本内容的值，图像丢失了。这是我使用的JS（但现在我用phone这个词来代替message）


函数myFunction（）{
var x=document.getElementsByTagName（'body'）[0].textContent；
var v=x.替换（“消息”、“电话”）；
document.getElementsByTagName（'body'）[0].textContent=v；
}

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

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

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

请参阅

要执行类似操作，您需要遍历文档中的所有文本节点，搜索单词并将其包装

大概是这样的：

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

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

试试看

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

var children=document.body.childNodes；
对于（var len=childrence.length，child=0；childY U禁止使用？因为？@Kolink jQuery在正确使用它的情况下并不糟糕，正如图中所示。如果你使用完整的功能，它是一个很棒的工具。否则，香草JS会更快、更流畅、更容易，是的。但是对于使用大量javascript的大型项目，jQuery是减少时间的好方法你需要在这个项目上工作。@Rune我同意你的说法，但在我看来，即使使用得当，它也是一个笨拙的工具。@Kolink我必须同意它是巨大的，你可以在一个项目中使用很多东西，但在另一个项目中不可以。但是如果不使用太多，对速度的影响也不会太大。它非常适合创建瘦的gs就像一个交互式菜单，因为所有的滑动功能等等。如果你使用vanilla JS，你需要重新设计一半的轮子来制作正确的动画，从而浪费时间。通常开发网站，时间就是金钱。你不能说网站会因为jQuery本身而明显变慢。这可能是因为你对我做了什么t和你是如何做到的。哇，charlimit:OThis只适用于顶级节点。虽然在问题中给出的特定示例中是这样的，但如果有一个包含元素，它就不起作用了。@Kolink，我知道。我在回答最后一个问题“有没有其他方法可以替换直接放在正文下的文本？”谢谢你的快速回复！真的很有帮助！
highlight("message",document.getElementById('replace-me'));

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