如何使用JavaScript在HTML中为特定单词添加样式？

有人能帮我写一个JS函数，它将以字符串（单词）作为参数吗？ 然后为HTML中的所有这些单词添加一个附加样式（例如更改颜色）。我不知道它在哪里。这个“单词”可以在

内部，或者

甚至

内部

示例：

HTML:

结果:

HTML中的所有“Hello”单词都是红色字体

顺便问一下，可以这样写吗？
这是一个非常基本的例子。请注意，虽然这是不区分大小写的，但它将用您提供的任何大小写替换所有实例。例如，在下面的块中，我输入了
“Hello”
，它将
Hello
的一次出现设置为
Hello
。当然，您可以删除regex标志中的
i
，使其再次区分大小写，但是您必须对这两种情况运行函数两次，以突出显示这两个实例


函数颜色（str，color）
{
var rx=新的RegExp（str，“ig”）；
var replaced=document.body.innerHTML.replaceAll（rx，“+str+”）；
document.body.innerHTML=已替换；
}
颜色（“你好”，“红色”）
你好，世界

此块包含单词“hello”。
这里有一个方法，可以找到该单词并将其替换为
单词。我已经建立了一个名为“红色”的风格类。这是非常基本的，但适用于简单的应用程序。下面的评论中有一些解释


功能更改（word）{
//在body标记内查找页面上的所有html元素
让elems=document.queryselectoral（“body*”）；
//准备好我们的替代品
让span=“”+单词+”；
//循环遍历所有元素
for（设x=0；x
.red{
颜色：红色；
}
你好，世界
你好，世界CSS是为样式而设计的。使用JS将类添加到HTML元素中

功能：

传递要搜索的字符串和要搜索的选择器，在我的例子中，我搜索DOM中的所有标记并返回数组
[…document.getElementsByTagName（'*'）]

我们定义了一个数组来保存我们要搜索的非限制元素，另一个则保存我们要跳过的限制标记。然后我们用
循环
输出
数组！restricted.includes（tag.nodeName.toLowerCase（）
，检查restricted数组是否不包含来自DOM查询的元素。对于返回true的元素，我们将它们推送到
输出
数组-->
输出.push（tag）

一旦我们的
输出
数组中填充了我们要搜索的标记，我们就在标记中搜索字符串-->
标记.innerText.includes（string）
和非常重要：
！（tag.textContent.match（/\n/g）|[]）.length
将确保它是正确的子节点，如果返回true，我们将替换标记
innerHTML
，并简单地用span标记包装字符串，该标记现在包含一个按照我们希望的样式设置样式的类-->

你好，世界
你好，世界。。。

你好，世界



你好世界
世界你好
这是最好的解决方案。它在任何html上都可以正常工作，只需调用
匹配文本（“文本”、“黑色”、“红色”）；

您好，这里的基本问题是您如何定义“单词”？是否出现了前后都有非字母字符的字符串？有一种危险，就是您得到的答案只会改变给定字符串的任何出现。标记未定义什么标记未定义？@bodkia22标记由forEach方法隐式定义，数组=>元素（标记）。数组中的每个元素都被定义为forEach括号内的给定元素名称，在我的示例中，我使用了单词
标记
。否则JS会在控制台中抛出一个错误。是否运行了snipbit？这是有史以来最好的变体！因为它不会影响属性。我可以将els放入脚本中吗？函数更改（字符串）{const els=[…document.getElementsByTagName（'*'）]。。。。。。
<p id="p1">Hello World!</p>
<div>Hello World!</div>

function Change(string word){
  //change font color to red
}

Change("Hello")

tag.innerHTML = tag.innerText.replace(string, `<span class="red">${string}</span>`)

function replaceInElement(element, find, replace) {
    for (let i= element.childNodes.length; i-->0;) { 
        let child= element.childNodes[i];
        
        if (child.nodeType==1) { 
            let tag= child.nodeName.toLowerCase();  
            if (tag!='style' && tag!='script') 
                replaceInElement(child, find, replace); 
        } else if (child.nodeType==3) { 
            replaceInText(child, find, replace);
        }
    }
}
function replaceInText(text, find, replace) {
    let match; 
    let matches= [];
    
    while (match= find.exec(text.data)){ 
        matches.push(match);
    }
    
    console.log(matches);
    for (let i= matches.length; i-->0;) {
        match = matches[i];

        text.splitText(match.index); 
        text.nextSibling.splitText(match[0].length);

        text.parentNode.replaceChild(replace(match), text.nextSibling); 
    }
}

let matchText = (word, backColor, textColor) => {
    let regexp = new RegExp(`\\b(${word})\\b`, 'gmi');

    replaceInElement(document.body, regexp, function(match) { 

        var elem= document.createElement('span'); 
        elem.style.backgroundColor = backColor;
        elem.style.color = textColor;

        elem.appendChild(document.createTextNode(match[0]));
        return elem;
    });
}