使用jQuery替换Div内文本中的短横线（不覆盖标签类）

问题描述 #

需要将指定容器内所有文本中的“-”替换为空字符串，同时不能修改任何标签的类、样式等属性，现有jQuery代码无法完成该需求。

原HTML结构 #

<div class="reemplazo-guion">
  <div class="kt-btn-wrap kt-btn-wrap-0">
   <a class="kt-button" href="#" style="border-radius:10px;border-width:1px" >
     <span class="kt-btn-inner-text">Accede Ahora al Método <strong><em>G-e-n-g-h-i-s K-h-a-n</em></strong></span>
   </a>
  </div>
</div>

原代码问题分析 #

原jQuery代码仅筛选了.reemplazo-guion的直接子文本节点，但目标文本嵌套在<em>标签内部，属于深层后代的文本节点，因此无法被匹配到；同时原代码的replace('-','')只会替换第一个“-”，无法处理所有匹配项。

jQuery(document).ready(function(){
jQuery('.reemplazo-guion').contents().filter(function() {
      return this.nodeType == 3;
    }).each(function(){
      this.textContent = this.textContent.replace('-','');
    });
});

解决方案代码 #

通过遍历容器内所有后代元素的文本节点，同时使用全局正则替换所有“-”：

jQuery(document).ready(function(){
  // 获取容器内所有元素（含自身）的内容节点
  jQuery('.reemplazo-guion').find('*').addBack().contents().filter(function() {
    // 筛选文本节点（nodeType=3）
    return this.nodeType === 3;
  }).each(function(){
    // 全局替换所有“-”为空字符串
    this.textContent = this.textContent.replace(/-/g, '');
  });
});

效果说明 #

执行后，<em>标签内的G-e-n-g-h-i-s K-h-a-n会被替换为Genghis Khan，所有标签的类属性、样式、结构均保持不变，仅修改文本内容中的“-”。

内容的提问来源于stack exchange，提问作者LΞИIИ