Vue.js中JavaScript replace函数替换换行时<test>字符被意外替换问题

• Vue模板解析时，HTML属性的解析优先级高于属性内JS表达式的解析：你直接在v-html属性值中使用/包裹的正则字面量时，模板解析器会将字符串'/<test>/'中的首尾/错误识别为正则的分隔符，导致整个JS表达式的语义被解析异常，原本只匹配换行的正则规则被篡改，因此出现了非换行内容被替换的问题。
• 额外排查点：你当前代码的替换值为'testing'，如果你的需求是移除换行符，替换值应该为空字符串''，否则所有换行都会被替换为testing文本，也会产生不符合预期的修改。

• 方案1（推荐）：将字符串处理逻辑抽离到组件的方法/计算属性中，避免在模板表达式内写复杂正则：
  组件JS部分代码：

  methods: {
    removeLineBreaks(rawStr) {
      // 匹配所有换行符，替换为空实现移除效果
      return rawStr.replace(/(?:\r\n|\r|\n)/g, '')
    }
  }
  

  模板部分修改为：

  <code v-html="removeLineBreaks(你要处理的原始字符串变量)"></code>
  

• 方案2：如果必须在模板内写正则，改用RegExp构造函数写法，避免/分隔符被模板错误解析：

  <code v-html="'/<test>/'.replace(new RegExp('(?:\\r\\n|\\r|\\n)', 'g'), '')"></code>
  

  注意RegExp构造函数的字符串参数中，反斜杠需要转义，要写为\\才能被正确识别。
• 优化建议：匹配换行的正则可以简化为/[\r\n]/g，写法更简洁，执行效果完全一致。

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