如何为文本中的连字添加单一 CSS 类名而不重复？-html教程-PHP中文网

如何为文本中的连字添加单一 CSS 类名而不重复？

本文介绍如何通过调整函数调用参数或封装专用函数，确保 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" 等任意类名。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

若项目中 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"），简洁可靠；高频固定场景再辅以语义化封装。二者皆不改变核心逻辑，却显著提升代码表达力与长期可维护性。