本文讲解如何优化文本高亮函数，避免重复类名，确保每次仅注入一个指定类（如 ligature），并通过参数控制实现灵活复用。
本文讲解如何优化文本高亮函数，避免重复类名，确保每次仅注入一个指定类（如 `ligature`），并通过参数控制实现灵活复用。
在处理字体连字（ligatures）等需要精准文本包裹的场景中，常需将特定字符序列（如 "fi"、"ffl"）用 <span></span> 包裹并赋予语义化类名。原始代码中调用 highlightText(el, ligatures, "highlight ligature") 会注入两个类，而实际需求往往只需一个——例如统一使用 ligature 类来启用 OpenType 连字或微调字距。
关键在于正确利用函数的可选参数机制。highlightText 函数已设计为支持自定义类名：
function highlightText(el, substrings, classNames = "highlight") {
// ...
}其中 classNames = "highlight" 表示：若调用时未传入第三个参数，则默认使用 "highlight"；但只要显式传入单个字符串（如 "ligature"），函数便会严格使用该值，不会拼接、不会追加、不会重复。因此，最简方案就是直接传入单一类名：
// ✅ 正确：只添加 'ligature' 类（一个类） highlightText(el, ligatures, "ligature");
无需修改函数内部逻辑，也无需新增正则或字符串处理——这正是参数化设计的价值。
立即学习“Java免费学习笔记（深入）”；
⚠️ 注意事项：
- 避免
innerHTML的潜在风险：当前实现通过el.parentNode.innerHTML.replace(...)修改 DOM，可能意外破坏事件监听器、表单状态或嵌套 HTML 结构。生产环境建议改用document.createTextNode()+insertBefore()/replaceChild()的安全遍历方案。- 正则顺序影响匹配结果：由于
["ff", "ffi", "ffl"]存在包含关系，若"ff"排在"ffi"前，可能导致"ffi"被拆分为"ff"+"i"。建议按长度降序排列 ligatures 数组：let ligatures = ["ffj", "ffl", "ffi", "fj", "fi", "fl", "ff"].sort((a, b) => b.length - a.length);- 选择器扩展性：如需同时处理
<h1></h1>和<h2></h2>，可直接扩展 CSS 选择器：document.querySelectorAll("h1, h2")，无需修改函数逻辑。
若项目中 ligature 类使用频繁，还可封装专用函数提升可读性：
function highlightLigatures(elements, substrings) {
elements.forEach(el => highlightText(el, substrings, "ligature"));
}
// 使用示例
highlightLigatures(document.querySelectorAll("h1, h2"), [
"fi", "fl", "ffi", "ffl", "fj", "ffj", "ff"
]);此方式不减少代码行数，但显著增强意图表达——调用方一眼可知“这是专为连字高亮设计的逻辑”，利于团队协作与长期维护。
总结：单一类名注入的核心，是明确传递单一字符串参数而非空格分隔的多类名。善用函数默认参数与职责分离原则，即可在保持灵活性的同时，确保输出精准、简洁、可预测。
