您好，我有一个<strong></strong>嵌套在段落<p></p>中的标签，我正在尝试删除<strong>标签但保留文本或值。类似于在 jquery 中展开但在 javascript 中的东西。我在一个虚拟的 HTML 页面上尝试了这段代码，它工作正常<html><body> <p>aaa <Strong>bbbbb</Strong></p> <p>acccaa <Strong>ddddd</Strong></p> <p>eeee <Strong>ffff</Strong></p> <script> var p = document.getElementsByTagName("p"); for(var i=0;i<p.length;i++){ var strongs = p[i].getElementsByTagName("strong"); for(var j=0;j<strongs.length;j++){ p[i].replaceChild(document.createTextNode(strongs[j].innerText),strongs[j]); } } </script></body></html>但是，一旦我在真实页面示例上尝试相同的代码：https ://www.bustle.com/privacy我收到此错误：在“节点”上执行“replaceChild”失败：要替换的节点不是该节点的子节点。关于如何让它在示例或任何其他示例上工作的任何想法？
2 回答
慕码人8056858
TA贡献1803条经验 获得超6个赞
getElementsByTagName()返回一个活动的NodeList。<strong>因此，当您替换一个标签时，以下所有元素的索引都会向下移动，并且当您在同一段落中有多个标签时，代码会失败。结果，它会跳过一些标签。
解决方案是将 转换NodeList为数组，以便在循环时不会更改。
实际页面中另一个不在代码段中的问题是<strong>标签可以嵌套在<p>. 您应该使用strongs[j].parentElement它来获取其直接父级，而不是假设 thep[i]是父级。
var p = document.getElementsByTagName("p");
for (var i = 0; i < p.length; i++) {
var strongs = Array.from(p[i].getElementsByTagName("strong"));
for (var j = 0; j < strongs.length; j++) {
strongs[j].parentElement.replaceChild(document.createTextNode(strongs[j].innerText), strongs[j]);
}
}
<html>
<body>
<p>aaa
<Strong>bbbbb</Strong> - <strong>12345</strong></p>
<p>acccaa <span><Strong>ddddd</Strong> x</span></p>
<p>eeee
<Strong>ffff</Strong>
</p>
</body>
</html
您还可以通过使用查询选择器来避免嵌套循环。
var strongs = document.querySelectorAll("p strong");
strongs.forEach(strong => strong.parentElement.replaceChild(document.createTextNode(strong.innerText), strong));
<html>
<body>
<p>aaa
<Strong>bbbbb</Strong> - <strong>12345</strong></p>
<p>acccaa <span><Strong>ddddd</Strong> x</span></p>
<p>eeee
<Strong>ffff</Strong>
</p>
</body>
</html>
四季花海
TA贡献1811条经验 获得超5个赞
无需遍历段落即可删除<strong>. 简单地移除所有“强项”就可以了。
function removeStrongs() {
let strongs = document.querySelectorAll('strong');
strongs.forEach(strong => {
strong.insertAdjacentText('afterend', strong.innerText);
strong.remove();
});
}
<h4>This is a <strong>Title</strong></h4>
<p>
Now is the time for all <strong>good</strong> men to come to the <strong>aid</strong> of the party.
</p>
<p>A <strong>quick brown</strong> fox jumps over the lazy dog.</p>
<button onclick="removeStrongs();">Remove Strongs</button>
添加回答
举报
0/150
提交
取消