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

Question

谁能帮我写一个 JS 函数，它将一个字符串（单词）作为参数？然后为 HTML 中的所有这些词添加额外的样式（例如更改颜色）。我不知道它在哪里。这个“词”可以在<div>，或者<p>甚至<b>.

里面

示例：

HTML:

<p id="p1">Hello World!</p>
<div>Hello World!</div>

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

调用函数：

Change("Hello")

结果：

HTML中的所有“你好”字样都是红色字体。

对了，这样写可以吗？

Answer 1

这是一个非常基本的示例。请注意，虽然这不区分大小写，但它会用您提供的任何大小写替换所有出现的地方。例如，在下面的块中，我输入了 "Hello"，这将 hello 的一次出现设置为 Hello。您当然可以删除正则表达式标志中的 i 以使其再次区分大小写，但是您必须运行在两种情况下都使用该函数两次以突出显示两个实例。

function color(str, color)
{
  var rx = new RegExp(str, "ig");
  var replaced = document.body.innerHTML.replaceAll(rx, "<span style='color:"+color+"'>"+str+"</span>");
  document.body.innerHTML = replaced;
}

color("Hello", "red");

<p>Hello world</p>
<p>This block contains the word "hello."</p>

Answer 2

这里有一个方法可以找到单词并将其替换为 <span class='red'> word </span>。我已经用样式设置了一个名为 'red' 的 class。这是非常基本的，但适用于简单的应用程序。下方评论有解释

function Change(word) {
  //find all html elements on the page inside the body tag
  let elems = document.querySelectorAll("body *");
  // get our replacement ready
  let span = "<span class='red'>" + word + "</span>";
  //loop through all the elements
  for (let x = 0; x < elems.length; x++) {
    // for each element, 'split' by the word we're looking for, then 'join' it back with the replacement
    elems[x].innerHTML = elems[x].innerHTML.split(word).join(span);
  }
}

Change('Hello', 'Goodbye');

.red {
  color: red;
}

<p id="p1">Hello World!</p>
<div>Hello World!</div>

Answer 3

CSS 专为造型而生。使用 JS 将 class 添加到您的 HTML 元素。

函数：

传递 string 进行搜索，传递 selector/s 进行搜索，在我的例子中，我正在搜索中的所有标签DOM 和 return 数组 [...document.getElementsByTagName('*')].

我们定义一个数组来保存我们要搜索的非限制元素另一个包含我们要跳过的 restricted 标签。然后我们用 !restricted.includes(tag.nodeName.toLowerCase() 循环 output 数组，这会检查我们的 restricted 数组 不包含 我们的DOM 查询中的元素。对于 return true 的元素，我们将它们压入我们的 output 数组 --> output.push(tag)

一旦我们的 output 数组充满了我们要搜索的标签，我们就在标签中搜索我们的 string --> tag.innerText.includes(string) 和 非常重要： !(tag.textContent.match(/\n/g)||[]).length 将确保它是正确的子节点，如果 returns true，我们替换标签 innerHTML 并简单地用 span[ 包裹我们的字符串=63=] 标签现在包含一个 class 的样式，我们希望它的样式 -->

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

const els = [...document.getElementsByTagName('*')] const string = "Hello" function Change(string, els) { const restricted = ['html', 'body', 'head', 'style', 'meta', 'script'] const output = [] els.forEach(tag => !restricted.includes(tag.nodeName.toLowerCase()) ? output.push(tag) : null) output.forEach(tag => tag.innerText.includes(string) && !(tag.textContent.match(/\n/g) || []).length ? tag.innerHTML = tag.innerText.replace(string, `<span class="red">${string}</span>`) : null) } Change(string, els)

.red { color: red; }

<p id="p1">Hello World!</p> <div>Hello World...</div> <div> <ul> <li>Hello World.</li> </ul> </div> <p> <a href="#">Hello <span>World</span></a> </p> <table border="1"> <tr> <th>Hello</th><th>World</th> </tr> <tr> <td>World</td><td>Hello</td> </tr> </table>

Answer 4

这是最好的解决方案。它在任何html下都可以正常工作，只需调用matchText("text","black","red");

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;
    });
}

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

How to add style for specific words at HTML using JavaScript?

html

javascript

css

dom

dom-events