javascript - css中字符串的模式匹配

Question

我们在 css 中是否有任何样式可以应用于一组匹配的关键字？

例如，我有一个单词列表 {"history","leaders","emotions","time"...}

我想将 css 样式应用于下面段落中与上面列表匹配的所有关键字。

“纵观人类历史，或者说最伟大的领导者和思想家都利用语言的力量来改变我们的情绪，让我们参与他们的行动原因，并塑造命运的进程。言语不仅可以创造情感，还可以创造行动。从我们的行动中流出我们生活的结果。”托尼·罗宾斯

Answer 1

Thanks all for inputs. I will go for javascript to edit the html code before applying css.

这是一种方法，展示了如何循环遍历数组:

['history', 'leaders', 'emotions', 'time']

并将文本中的每个单词加粗。

var wordsToHighlight = ['history', 'leaders', 'emotions', 'time'];

var paragraph2 = document.getElementsByTagName('p')[1];
var paragraph2Text = paragraph2.innerHTML;
var paragraph2RichText = paragraph2Text;

for (var i = 0; i < wordsToHighlight.length; i++) {
    var regex = new RegExp('('+ wordsToHighlight[i] + ')', 'gi');
    paragraph2RichText = paragraph2RichText.replace(regex, '<strong>$1</strong>');
}

paragraph2.innerHTML = paragraph2RichText;

<p>“Throughout human history, or greatest leaders and thinkers have used the power of words to transform our emotions, to enlist us in their causes, and to shape the course of destiny. Words can not only create emotions, they create actions. And from our actions flow the results of our lives.” Tony Robbins</p>
<p>“Throughout human history, or greatest leaders and thinkers have used the power of words to transform our emotions, to enlist us in their causes, and to shape the course of destiny. Words can not only create emotions, they create actions. And from our actions flow the results of our lives.” Tony Robbins</p>