Question

我有很多类似

的单词

const conjunctions = ["for, and, nor, but, or, yet, so"]

在页面加载时，我想运行一个检查#page id的文本并将这些词的颜色更改为红色的函数。我试图使用fontcolor方法，但是它似乎不起作用？ https://www.w3schools.com/jsref/jsref_fontcolor.asp

预先感谢您的帮助。

Answer 1

为此，您需要解析ID为innerHTML的元素page，然后用包含子元素的新标记替换它，只要存在匹配的单词即可。

这是我要怎么做：

const words = ["for", "and", "nor", "but", "or", "yet", "so"];

const el = document.getElementById("page");

const markup = el.innerHTML.split(" ").map((word) => {
  if (words.includes(word)) {
    return '<span class="highlight">' + word + '</span>';
  } else {
    return word;
  }
}).join(" ");

el.innerHTML = markup;

.highlight {
  color: red;
}

<html>
  <head>
  </head>

  <body>
    <p id="page">
      This is some text, and I want it to display some style.
    </p>

  </body>
</html>

考虑到我在段落中的所有空格处强加了一个“ split”，因此单词匹配在这里是很原始的。如果您要考虑页面正文中其他字符旁边可能紧跟的单词，例如逗号，其他标记，制表符，换行符等，则此方法将无法使用。

Javascript函数可搜索DOM并更改数组中单词的颜色

1 个答案: