应用 Span 类来设置特定单词的样式，而不设置附加标点符号的样式

Question

我试图将特定的单词（“Ethan”、“passionate”、“UX/UI”和“Designer”）包装在段落中的跨度类中，以实现单独的样式。但是，由于 HTML 中“Ethan”后面直接跟有逗号，因此只有当我包含逗号（“Ethan,”）时，JavaScript 才会选择它，从而导致逗号也被设置样式，这是我不希望的。如何仅将样式应用于“Ethan”而不影响逗号？

这是我当前的 JS：

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>

谢谢！

我已经尝试过将单词“Ethan”包装在 元素中并对其应用特定的 CSS 样式，但这不起作用。问题在于，在 HTML 中，“Ethan”显示为单个实体（名称后面直接有逗号），从而阻止跨度仅定位“Ethan”。

这是我使用的 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;
}

我知道这是一个非常具体的用例，但这是我想要应用此算法的唯一句子。设置一些从样式中排除逗号的规则似乎可以解决问题，我只是不确定如何做到这一点，因为我不是开发人员并且拥有非常非常基本的开发知识 - 一些帮助/解决方案将是非常赞赏！

Answer 1

在您的

map

中，您可以使用

replace()

来清理单词，如下。

如果您想在单词之间留有空格，可以在数组上使用

.join(' ')

来代替逗号

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

.highlight {
    color: #333;
}

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