时间戳

首页 > 解决方案 > 如何在一组 span 元素后替换纯文本内容或文本节点？

javascript - 如何在一组 span 元素后替换纯文本内容或文本节点？

问题描述

我需要在<span class="inf-group">...</span>节点后立即用竖线替换每个逗号，因为我无法直接访问原始 html。我什至犯了一个错误，使用 css pesudo-element like 编辑该部分::after。是否有任何 javascript 或 jQuery 解决方案可以对整个孤立的文本节点进行操作？

样本表示原样：

<span class="irreg-infls">
    <span class="inf-group"><span class="inf">aaa</span></span>
    ,
    <span class="inf-group"><span class="inf">bbb</span></span>
    ,
    <span class="inf-group"><span class="inf">ccc</span></span>
</span>

用户的最终表示：

<span class="irreg-infls">
    <span class="inf-group"><span class="inf">aaa</span></span>
    |
    <span class="inf-group"><span class="inf">bbb</span></span>
    |
    <span class="inf-group"><span class="inf">ccc</span></span>
</span>

标签： javascripthtml

解决方案

使用以下代码替换相同的代码。

请参见检查节点类型

document.querySelector('.irreg-infls').childNodes.forEach((node)=>{
    if(node.nodeType == 3 && node.nodeValue.trim() == ',' ) {
        node.nodeValue = node.nodeValue.replace(',', '|');
    }
})
<span class="irreg-infls">
    <span class="inf-group"><span class="inf">aaa</span></span>
    ,
    <span class="inf-group"><span class="inf">bbb</span></span>
    ,
    <span class="inf-group"><span class="inf">ccc</span></span>
</span>

推荐阅读