Question

我想在这个p-tag中用“skägget”替换“morrhåren”。我不应该在HTML-kod中改变任何东西，只能在我的js文件中。如何设置使用Javascript更改这些单词而不是使图像消失？ The HTML-kod

<p><img src=”http://blogg.wikki.se/wp-content/upploads/2009/06/catbyBaikal.jpg” align=”right”>
Är <span>katt</span>en skrämd lägger den morrhåren bakåt, detsamma gör den vid slagsmål för att skydda morrhåren. Om <span>katt</span>en är en nyfiken vinklar den morrhåren framåt.<p>

Answer 1

你可以做一个简单的innerHTML替换（p.innerHTML = p.innerHTML.replace(/morrhåren/g, "skägget")，其中p是对元素的引用），这不会使图像消失（img元素将被删除并替换为同一图像的新元素），但我将假设你不应该这样做的原因（例如：img元素上的事件处理程序）你已经明确表示你需要单独留下img元素了。

如果是这种情况，您需要浏览p的子节点并仅在文本节点上运行（nodeType === 3），更新nodeValue （文本节点的文本）。如果目标词仅出现在顶层，则只需要遍历p的子节点;如果它出现在p中的其他元素内，则需要递归函数。

例如，假设p是对该元素的引用：

for (var child = p.firstChild; child; child = child.nextSibling) {
    if (child.nodeType === 3) {
        child.nodeValue = child.nodeValue.replace(/morrhåren/g, "skägget");
    }
}

同样，如果你需要处理后代元素，你需要添加递归。

示例：

setTimeout(function() {
    var p = document.querySelector("p");
    for (var child = p.firstChild; child; child = child.nextSibling) {
        if (child.nodeType === 3) {
            child.nodeValue = child.nodeValue.replace(/morrhåren/g, "skägget");
        }
    }
}, 800);

<p><img src=”http://blogg.wikki.se/wp-content/upploads/2009/06/catbyBaikal.jpg” align=”right”>
Är <span>katt</span>en skrämd lägger den morrhåren bakåt, detsamma gör den vid slagsmål för att skydda morrhåren. Om <span>katt</span>en är en nyfiken vinklar den morrhåren framåt.<p>

Answer 2

您可以使用<p>元素（document.getElementById("/**enter id of your <p> element*/").innerHTML）的innerHTML属性来获取（通过将其分配给变量）或设置（通过为属性分配新的字符串值）整个任何HTML元素的内容。

使用Javascript替换字词而不删除图像

2 个答案: