删除标签名称但保留标签
您好，我有一个<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”失败：要替换的节点不是该节点的子节点。
关于如何让它在示例或任何其他示例上工作的任何想法？
倚天杖浏览 121回答 2
2回答
-
慕码人8056858
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> -
四季花海
无需遍历段落即可删除<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>
随时随地看视频慕课网APP
相关分类
JavaScript