如何为指定单词添加Span样式且不影响附带标点？

我需要给标题里的「Ethan」「passionate」「UX/UI」「Designer」这几个词单独设置样式，但遇到了两个问题：

• 用JavaScript自动包裹span时，因为「Ethan」后面跟着逗号，代码只能匹配到「Ethan,」，导致逗号也被应用了样式，不符合需求
• 手动给「Ethan」套<span class="highlight">并添加CSS样式，但是样式没生效

当前使用的代码 #

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const herotext = document.getElementById('herotext');
  const words = herotext.innerText.split(' ');
    
  herotext.innerHTML = words.map(word => {
    if (['Ethan', 'passionate', 'UX/UI', 'Designer'].includes(word))
    {
      return `<span style="color: #F33;">${word}</span>`;
    } else {
      return `<span>${word}</span>`;
    }
  });
});        

HTML代码

<h1 id="herotext">Hi, I&#8217;m Ethan, a passionate UX/UI Designer from the scenic landscapes of Northern Ireland.</h1>

尝试过的代码 #

手动修改的HTML

<h1 id="herotext">Hi, I’m <span class="highlight">Ethan</span>, a passionate UX/UI Designer from the scenic landscapes of Northern Ireland.</h1>

对应的CSS

.highlight {
    color: #333;
}

解决方案 #

方案一：修复JavaScript代码，正确处理带标点的单词 #

问题根源是按空格分割后，「Ethan,」被当成了一个完整单词，无法匹配目标词「Ethan」。可以用正则表达式拆分单词和标点，只给核心单词添加样式：

document.addEventListener('DOMContentLoaded', function() {
  const herotext = document.getElementById('herotext');
  const targetWords = ['Ethan', 'passionate', 'UX/UI', 'Designer'];
  
  // 正则匹配单词（支持带斜杠的UX/UI）和后续标点
  herotext.innerHTML = herotext.innerText.replace(/([\w\/]+)([.,!?]*)/g, (match, word, punctuation) => {
    if (targetWords.includes(word)) {
      return `<span style="color: #F33;">${word}</span>${punctuation}`;
    }
    return match;
  });
});

这个正则会把每个单词（比如「Ethan」「UX/UI」）和后面的标点（逗号、句号等）分开，只给匹配到的目标词包裹span，标点保持原样。

方案二：解决手动添加span样式无效的问题 #

如果手动添加的.highlight样式没生效，通常是CSS优先级冲突导致的，可按以下步骤排查：

1. 提高选择器优先级：用更具体的选择器覆盖父元素样式

#herotext .highlight {
  color: #333;
}

2. 检查是否有行内样式或更高优先级规则覆盖：打开浏览器开发者工具，查看该元素的「计算样式」，看是否有其他规则（比如#herotext span）覆盖了.highlight的样式
3. 禁用自动生成的JavaScript：如果保留了原来的JS代码，它会重新渲染整个标题的HTML，覆盖你手动写的span结构，记得注释或删除原来的JS

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