jQuery替换指定ID内连字符为换行符时WordPress HTML结构损坏问题

数据老陈

2026-10-6

问题原因

你原有代码直接操作#titel-sr容器的完整HTML字符串进行替换，会把标签属性（比如class、data-*属性）里的连字符也一并替换，直接破坏了原有HTML结构，才会出现属性错乱、部分内容未替换的异常。

修复方案

根据你的场景选对应方案即可：

方案1（适用场景：目标h2标签内只有纯文本，无其他内嵌标签）

直接读取h2的纯文本内容（不会包含任何标签、属性信息），替换后再回填为HTML内容，完全不会触碰标签属性：

jQuery(document).ready(function($){
    const $targetH2 = $('#titel-sr h2');
    // 读取纯文本内容，排除所有标签、属性
    const titleText = $targetH2.text();
    // 替换所有短连字符、长破折号为换行标签后回填
    $targetH2.html(titleText.replace(/-|–/g, '<br>'));
});

方案2（适用场景：目标h2内有span、a等其他内嵌标签，需要保留原有标签结构）

遍历容器内的所有纯文本节点，仅对文本内容做替换，完全不触碰元素和属性：

jQuery(document).ready(function($){
    $('#titel-sr')
      // 选中容器内所有节点
      .find('*').addBack().contents()
      // 筛选出纯文本节点
      .filter(function() {
        return this.nodeType === 3;
      })
      // 逐一对文本节点做替换
      .each(function() {
        const replacedText = this.nodeValue.replace(/-|–/g, '<br>');
        $(this).replaceWith(replacedText);
      });
});