JavaScript - 如何为文本字符串中的特定单词设置样式？

Question

我这里有一串文本字符串，将会根据动态生成的内容包含以下情况之一：

<h1 id="headline">"Get your FREE toothbrush!"</h1>

OR

<h1 id="headline">"FREE floss set and dentures!"</h1>

由于这将是动态生成的，我无法在单词“FREE”周围包装一个<span>，因此我想使用JavaScript特别针对单词“FREE”进行定位，以便我可以将其用不同的字体家族和字体颜色进行样式设置，而不是<h1>已设定的任何样式。我应该使用哪些方法来实现这一目标？

- Marc R

---

这个回答解决了你的问题吗？如何使用JavaScript高亮文本 - Heretic Monkey

Answer 1

您可以使用样式化的HTML搜索和替换子字符串'FREE'。如果字符串中有多个'FREE'，则可能需要使用正则表达式（除非您不需要支持Internet Explorer）。请参阅如何替换字符串的所有出现次数？ 在您的情况下：

let str = '<h1 id="headline">"FREE floss set and dentures!"</h1>'
str = str.replace(/FREE/g, '<span color="red">FREE</span>');

- jla

---

一个用于单词的正则表达式的简单改进是 \bWORD\b。 - user2864740

@user2864740 如果我错了，请纠正我，但是\bWORD\b不就是写(?<=(^|\s+))FREE(?=($|\s+))的更简洁的方式吗？\b不是针对单词边界的吗？ - shreyasm-dev

\b 代表目标单词边界。然而，它与另一种形式 \s 不同，后者只匹配空格，而 \bWORD\b 则会在 - 或 . 上断开，例如：与输入“Foo-WORD！”进行比较。这取决于所需的精确行为。 - user2864740

Answer 2

您要查找的属性是innerHTML，请参考以下示例：

var word = document.getElementById('word');

function changeWord(){
    word.innerHTML = "another";
  word.style.backgroundColor = 'black';
  word.style.color = 'white';
}

<h1 id="headline">
  <span id="word">some</span> base title
</h1>

<button onClick="changeWord()">
  change
</button>

- Rod Ramírez

---

这并没有回答问题提出者的问题。他们要求仅更改特定的文本片段，而这将更改整个HTML。 - shreyasm-dev

他们还提到：“[它]将是动态生成的，所以他们无法在单词“FREE”周围包裹<span>标签”。 - shreyasm-dev

澄清一下，它可能有多个跨度。 - shreyasm-dev

我无法理解为什么他们不能将<span>标签包裹在该值周围。如果它是动态生成的，这意味着他们以某种方式能够引用那段文本。 - Rod Ramírez

使用querySelectorAll配合for循环或者forEach。 - shreyasm-dev

Answer 3

这里是一个使用切片和经典的连接方法的工作示例。

编辑：现在也包括第二个字符串的代码。

//get headline by id
var headline = document.getElementById("headline");

//declare your possible strings in vars
var string1 = "Get your FREE toothbrush!"
var string2 = "FREE floss set and dentures!"

//declare formatted span with "FREE" in var
var formattedFree = "<span style='color: blue; font-style: italic;'>FREE</span>"

//target positions for the rest of your string
var string1Position = 13
var string2Position = 4

//concat your vars into expected positions for each string
var newString1 = string1.slice(0, 9) + formattedFree + string1.slice(string1Position);
var newString2 = formattedFree + string2.slice(string2Position)


//check if strings exist in html, if they do then append the new strings with formatted span
if (headline.innerHTML.includes(string1)) {
  headline.innerHTML = newString1 
}
else if (headline.innerHTML.includes(string2)) {
  headline.innerHTML = newString2
}

<!-- As you can see the original string does not have "FREE" formatted -->
<!-- Change this to your other string "FREE floss set and dentures!" to see it work there as well -->
<h1 id="headline">Get your FREE toothbrush!</h1>

- Aib Syed

Answer 4

你可以将文本分割并将关键词“FREE”转换为元素。这样，你就可以给关键词“FREE”添加样式。这种方法是安全的，因为它不会修改任何非文本的HTML元素。

var keyword = "FREE";
var headline = document.getElementById("headline");
var highlight, index;
headline.childNodes.forEach(child => {
  if (child.nodeType == Node.TEXT_NODE) {
    while ((index = child.textContent.indexOf(keyword)) != -1) {
      highlight = child.splitText(index);
      child = highlight.splitText(keyword.length);
      with(headline.insertBefore(document.createElement("span"), highlight)) {
        appendChild(highlight);
        className = 'highlight';
      }
    }
  }
});

.highlight {
  /* style your keyword */
  background-color: yellow;
}

<div id="FREE">
  <h1 id="headline">"Get your FREE toothbrush! FREE floss set and dentures!"</h1>
</div>

- Naci Er