如何避免替换函数中类名重复？为连字添加单个CSS类

一、原始代码：如何仅添加单个'ligature'类名 #

要实现只添加单个ligature类名，直接修改调用highlightText时传入的第三个参数即可，无需复杂改动：

// 添加字体族类
let ligatures = ["fi", "fl", "ffi", "ffl", "fj", "ffj", "ff"];
let ligatureEls = document.querySelectorAll("h1");
ligatureEls.forEach((el) => {
  // 仅传入单个类名'ligature'
  highlightText(el, ligatures, "ligature");
});

function highlightText(el, substrings, classNames = "highlight") {
  substrings.forEach((substring) => {
    let regex = new RegExp(`(${substring})`, "gi");
    el.childNodes.forEach((childNode) => {
      if (childNode.nodeValue && regex.test(childNode.nodeValue)) {
        childNode.parentNode.innerHTML = childNode.parentNode.innerHTML.replace(
          regex,
          `<span class="${classNames}">${substring}</span>`
        );
      }
    });
  });
}

如果希望这个函数默认就添加ligature类，也可以直接修改函数的默认参数：

// 把默认参数从"highlight"改成"ligature"
function highlightText(el, substrings, classNames = "ligature") {
  // 函数逻辑不变
}

二、更新后代码的两个疑问解答 #

1. 能否通过逗号分隔添加其他元素？ #

完全可以。document.querySelectorAll()支持标准CSS选择器语法，你可以用逗号分隔多个选择器来选中不同元素，比如同时选中h1、h2和带有.title类的元素：

// 同时选中h1、h2和.title元素
highlightLigatures(document.querySelectorAll("h1, h2, .title"), ligatures);

2. 是否应将classNames默认值设为"glyph"而非"highlight"？ #

这取决于函数的定位：

• 如果highlightText是专门用于给连字添加glyph类的专用函数，那把默认值改成"glyph"更合理，这样调用时不需要每次都传第三个参数，代码更简洁。
• 如果highlightText是通用的文本高亮函数，后续可能还会用来给其他文本添加不同类名，那保留默认值"highlight"，调用时传入"glyph"更灵活。

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