使用GSAP打字机插件时如何批量加粗字符串中的|特殊字符

问题根因 #

• | 是正则表达式的特殊元字符，代表「或」逻辑，未转义直接传入RegExp构造函数会导致匹配逻辑异常，误匹配所有字符，才会出现每个字母都被包裹的错误结果
• 去掉g全局匹配标志后，String.replace()方法默认仅替换第一个命中的内容，因此只有第一个|会被处理
• 代码中使用<b>这类HTML实体，会被识别为纯文本输出，无法正常渲染为加粗标签

正确实现方案 #

如果你需要将连续的两个||作为整体加粗（完全匹配你给出的期望输出效果），可使用以下代码：

// 通用的子串加粗方法，自动处理正则特殊字符转义
function boldString(str, substr) {
  // 转义substr中所有正则特殊字符，避免匹配逻辑异常
  const escapedSubstr = substr.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const globalReg = new RegExp(escapedSubstr, 'g');
  return str.replace(globalReg, '<strong>' + substr + '</strong>');
}

gsap.to('.lead', { 
  duration: 3.5, 
  delay: 2, 
  text: boldString("|| something 1 || something 2 || more || last one ||", "||")
});

如果你需要每个单独的|字符单独加粗，仅需要将调用boldString时传入的第二个参数改为"|"即可。

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