基于内容中单词的 CSS 样式答案

【问题标题】：CSS styling based on words in the content基于内容中单词的 CSS 样式
【发布时间】：2020-01-12 02:19:18
【问题描述】：

我有一些从 API 中提取的文本，需要在其中包含一个单词，例如“传记”，带有 <span> 和 </span> 标签，以便我可以将其样式设置为与周围文本不同的样式。我如何使用 jQuery 或 JavaScript 来做到这一点？

【问题讨论】：

这是一个答案stackoverflow.com/a/926964/920557

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<style>
    .big{ font-size: 55px;  }
</style>
<script>
function chng(){
    var text = document.getElementById('pText').innerHTML;
    var text2 = text.replace('Germany','<span class="big">Germany</span>');
    document.getElementById('pText').innerHTML = text2;
}

</script>

</head>

<body>
<p id="pText">
Brazil - England - Germany
</p>
<button onclick="chng()">Try it</button>
</body>
</html>

【讨论】：

是的，这正是我正在寻找的解决方案，但点击时不会更改。无论如何在页面加载时自动更改它？
只需调用body标签上的函数：

【解决方案2】：

应该如何选择用于包装的单词（尽管我们不知道您的意思）？看来您必须在内容生成时执行此操作（在 PHP、.Net、asp 等中）。因此，您在 css 上创建类并在内容生成中使用它们，例如 (php): echo '这是我的文本。'; （css）：.big {字体粗细：粗体；字体大小：40px;}

【讨论】：

我正在使用 Wordpress 插件插入 Google 表格数据。它以无样式表的形式出现。表格本身没有任何特定的 css，所以我不能针对表格中的任何特定内容，除非我通过基于特定单词的 javascript 注入样式。
我知道了。查看新答案