如何无需将每个字母单独包裹<span>，实现匹配单词中字母的动态高亮？

核心靠CSS的background-clip: text属性配合线性渐变，就能给单词的前缀部分单独上色，完全不需要把每个字母都包成独立标签。具体实现逻辑如下：

• 监听输入框的输入事件，实时获取当前输入的文本内容和长度
• 遍历每个单词对应的<span>元素，判断单词是否以输入文本开头：
  • 匹配的话，用线性渐变生成“前N个字母高亮、剩余部分保持原色”的背景，再把背景裁剪成文字形状，同时将文字设为透明，让渐变背景透过文字显示出来
  • 不匹配的话，直接清空自定义样式，恢复文字默认状态

给你贴个可运行的代码片段：

// 假设输入框ID为searchInput，单词容器ID为wordList
const searchInput = document.getElementById('searchInput');
const wordItems = document.querySelectorAll('#wordList span');

searchInput.addEventListener('input', () => {
  const inputText = searchInput.value.trim().toLowerCase();
  const matchLength = inputText.length;

  wordItems.forEach(item => {
    const word = item.textContent.toLowerCase();
    if (matchLength > 0 && word.startsWith(inputText)) {
      // 计算高亮部分占单词总长度的百分比
      const highlightPercent = (matchLength / word.length) * 100;
      // 设置渐变背景：前半段用高亮色，后半段用默认文字色
      item.style.background = `linear-gradient(to right, #ffc107 0 ${highlightPercent}%, #212121 ${highlightPercent}% 100%)`;
      // 裁剪背景为文字形状，兼容webkit内核浏览器
      item.style.webkitBackgroundClip = 'text';
      item.style.backgroundClip = 'text';
      // 将文字设为透明，让背景颜色显示出来
      item.style.color = 'transparent';
    } else {
      // 清空自定义样式，恢复默认状态
      item.style.background = '';
      item.style.color = '#212121';
    }
  });
});

需要注意的细节：

• 统一转成小写再做匹配，避免大小写敏感导致的匹配误差
• 输入内容为空时，要清空所有高亮样式，回到初始状态
• background-clip: text在现代浏览器均支持，webkit系浏览器需添加前缀兼容

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