在WordPress中用JavaScript将破折号替换为<br>时遇到问题

尝试将.member__designation元素内的所有破折号替换为<br>标签，但执行代码后效果异常。

已尝试代码 #

var strNewString = $('.member__designation').html().replace(/-/g,'<br>');
$('.member__designation').html(strNewString);

相关截图 #

• 原始HTML结构：
  
• 替换前效果：
  
• 替换后异常效果：
  

解决思路与方案 #

1. 修正转义字符错误 #

你代码里用了<br>，这会被浏览器解析成**文本<br>**而不是换行标签，直接用<br>即可：

var strNewString = $('.member__designation').html().replace(/-/g,'<br>');
$('.member__designation').html(strNewString);

2. 匹配正确的破折号类型 #

页面中的破折号可能不是普通的ASCII短破折号（-），而是长破折号（—）或半角破折号（–），正则要覆盖这些变体：

// 匹配所有常见破折号类型
var strNewString = $('.member__designation').html().replace(/[-—–]/g,'<br>');
$('.member__designation').html(strNewString);

3. 避免破坏现有HTML结构 #

直接操作html()可能会打乱元素内的嵌套标签（比如截图里的<span>），可以只处理纯文本节点：

$('.member__designation').contents().each(function() {
  if (this.nodeType === 3) { // 仅处理文本节点
    $(this).replaceWith(this.nodeValue.replace(/[-—–]/g, '<br>'));
  }
});

内容的提问来源于stack exchange，提问作者Gil