本文介绍如何通过调整函数调用参数或封装专用函数，确保 HTML 连字（如 "fi"、"ffl"）被包裹在仅含一个指定类名（如 ligature）的 中，避免冗余类名，提升代码可维护性与语义清晰度。
本文介绍如何通过调整函数调用参数或封装专用函数，确保 html 连字（如 "fi"、"ffl"）被包裹在仅含一个指定类名（如 `ligature`）的 `` 中，避免冗余类名，提升代码可维护性与语义清晰度。
在处理字体连字（ligatures）时，常见需求是将特定字符组合（如 "fi"、"ffl"、"fj" 等）高亮标记，以便通过 CSS 启用 font-variant-ligatures: discretionary; 或控制字间距。但原始代码中调用 highlightText(el, ligatures, "highlight ligature") 会为每个 添加两个类名，违背“单一职责”原则，也增加样式管理复杂度。
最直接、推荐的解决方案是显式传入单个类名，充分利用函数已支持的 classNames 参数：
// ✅ 正确：只传入一个类名 'ligature' highlightText(el, ligatures, "ligature");
此时 highlightText 函数内部会生成如下 HTML：
<span class="ligature">fi</span>
而非：
立即学习“前端免费学习笔记（深入）”；
<span class="highlight ligature">fi</span>
该方式无需修改函数逻辑，语义清晰、零冗余，且保持函数通用性——你仍可在其他场景中传入 "highlight"、"glyph" 或 "text-ligature" 等任意类名。
若项目中 90% 的调用都使用 "ligature"，还可进一步封装语义化函数，提升可读性与一致性：
function highlightLigatures(elements, substrings) {
elements.forEach(el => highlightText(el, substrings, "ligature"));
}
// 使用示例：简洁、意图明确
highlightLigatures(document.querySelectorAll("h1"), [
"fi", "fl", "ffi", "ffl", "fj", "ffj", "ff"
]);⚠️ 注意事项：
- 避免 innerHTML 频繁重写：当前实现依赖 childNode.parentNode.innerHTML.replace(...)，可能意外破坏事件监听器或嵌套结构。生产环境建议改用 document.createElement + Node.replaceWith() 实现安全 DOM 操作。
- 正则需转义特殊字符：虽然 "fi" 等不含正则元字符，但若未来扩展支持如 "f." 或 "f*", 需先对 substring 做 RegExp.escape() 处理（可用 substring.replace(/[.*+?^${}()|[]\]/g, '\$&')）。
- 大小写敏感性："gi" 标志确保匹配不区分大小写，符合多数排版场景；若需严格匹配原文本大小写，请改为 "g"。
- 选择器可扩展：document.querySelectorAll("h1, h2, .title") 支持多选择器，用逗号分隔即可，无需额外修改函数。
总结：优先使用参数传入单类名（如 "ligature"），简洁可靠；高频固定场景再辅以语义化封装。二者皆不改变核心逻辑，却显著提升代码表达力与长期可维护性。
