本文介绍如何通过 JavaScript 精准匹配 HTML 标题中的常见连字（如 "fi"、"ffl" 等），并统一包裹在仅含一个指定类名（如 ligature）的 中，避免冗余类名，同时提升代码可读性与复用性。
本文介绍如何通过 javascript 精准匹配 html 标题中的常见连字（如 "fi"、"ffl" 等），并统一包裹在仅含一个指定类名（如 `ligature`）的 `` 中，避免冗余类名，同时提升代码可读性与复用性。
在处理字体连字（ligatures）时，为确保 CSS 字体特性（如 font-variant-ligatures: discretionary;）生效，常需将连字序列单独包裹于 元素中，并赋予特定类名以应用样式（例如控制 letter-spacing 或启用 OpenType 特性）。原始代码中调用 highlightText(el, ligatures, "highlight ligature") 会注入两个类名，而实际需求往往只需一个语义明确的类（如 ligature）。
核心解决方案：直接传入单一类名字符串
无需修改函数逻辑，只需在调用 highlightText 时显式传入目标类名即可：
let ligatures = ["fi", "fl", "ffi", "ffl", "fj", "ffj", "ff"];
let ligatureEls = document.querySelectorAll("h1");
ligatureEls.forEach((el) => {
highlightText(el, ligatures, "ligature"); // ✅ 仅传递一个类名
});
此时 highlightText 函数中的 classNames 参数将接收 "ligature"，覆盖其默认值 "highlight"，最终生成的 HTML 如下：
<h1>The <span class="ligature">ffi</span>gure shows...</h1>
进阶优化：封装专用函数提升可维护性
若项目中多处需高亮连字，建议将通用逻辑与业务意图分离——定义一个语义化更强的封装函数：
function highlightLigatures(elements, substrings) {
elements.forEach(el => highlightText(el, substrings, "ligature"));
}
// 使用示例
highlightLigatures(document.querySelectorAll("h1, h2, .title"), [
"fi", "fl", "ffi", "ffl", "fj", "ffj", "ff"
]);
该方式不仅消除重复传参，还使调用语句自解释（highlightLigatures 比 highlightText(..., ..., "ligature") 更直观），且便于未来扩展（如统一添加 data-ligature 属性或兼容性降级逻辑）。
⚠️ 重要注意事项
- 避免 innerHTML 的潜在风险：当前实现使用 childNode.parentNode.innerHTML = ...replace()，会销毁并重建整个父节点的 DOM 结构，导致事件监听器丢失、表单状态清空、iframe 重载等问题。生产环境推荐改用 document.createElement + Text.splitText() 或 Range API 实现无损替换（可另作专题详解）。
- 正则安全处理：连字数组若含特殊正则字符（如 .、*），需提前转义；当前列表均为纯字母，可暂不处理。
- 大小写敏感性："gi" 标志确保匹配不区分大小写，适用于标题中可能出现的大写连字变体（如 "FFI"）。
- 选择器灵活性：document.querySelectorAll("h1, h2, .custom-heading") 支持多选择器逗号分隔，可轻松扩展至其他元素。
综上，通过精准控制函数参数传递，即可轻量、可靠地实现“单一类名包裹连字”的目标；进一步封装则让代码更健壮、更贴近业务语义，是兼顾简洁性与工程化的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
