0

我正在做一个项目，如果我们在数组上找到给定单词，我想更改它的文本颜色。例如，我有一个数组 ["Lorem","nemo"] ，我得到的文本来自 body 标签

这是我的索引文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="body">
    
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
    </div>


    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur
        exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
    </div>

    <div>
        Here, we have used a regular expression to match a certain portion of the string. We can capture certain groups in the
        match using matchAll() better than match().
    </div>
   

    <script src="main.js"></script>
</body>
</html>

这是我的 javascript


function change(){
var text =  document.querySelector("body");

var string = text.innerHTML;
// let searching = ["Lorem", "nemo","amet","better","matchAll"];
let searching = ["Lorem","nemo"];

// search
for(search of searching){
    
    var textfind = string.matchAll(search)
    for(m of textfind){
        // console.log(m[0])
        let statring_index  = m.index;
        let ending_index = m[0].length;

        let giventext = string.substring(statring_index, statring_index+ending_index)
        console.log(giventext)
       
        // giventext =  giventext.replace("/"+m[0]+"/g","<span style='color:red';>"+ giventext + "</span>")
       
               
        // document.write("<span style='color:red;>"+ m[0] + "</span>")
        var redText = string.substring(statring_index, statring_index+ending_index);
        text.innerHTML = string.substring(0,statring_index)+"<a style='color:red;'>"+redText+"</a>"+string.substring(statring_index+ ending_index);

    }
    
}
}

change()

现在的问题是，我希望所有出现的事件都为红色，但我的代码只能更改数组中的最后一个元素一次

代码的输出

所以如果我们在搜索数组中有那个词，我想把所有出现的地方都改成红色

4

3 回答 3

1

  • text.innerHTML = string.substring(...)在循环内部，它会一遍又一遍地更新文档正文，只有最后一次更新生效。

  • string 是不可变的，string.substring不会更新string变量，而是返回一个新副本。但是代码中没有分配给新的字符串变量。

简单的替换实际上可以工作

const searching = ["Lorem","nemo"];
let str = document.querySelector("body").innerHTML;
searching.forEach(term => {
  str = str.replaceAll(term, `<a style="color:red;">${term}</a>`);
});
document.querySelector("body").innerHTML = str;

不区分大小写并将整个单词与捕获组匹配

const searching = ["Lorem","nemo"];
let str = document.querySelector("body").innerHTML;
searching.forEach(term => {
  str = str.replace(new RegExp(`(\\b${term}\\b)`, 'gi'), '<a style="color:red;">$1</a>');
});
document.querySelector("body").innerHTML = str;
于 2021-11-16T09:29:49.847 回答
1

您可能会发现此方法更简单。它遍历 div 元素，然后在单词上使用简单的正则表达式遍历单词 with replaceAll，最后将 HTML 分配回 div 的innerHTML。

const arr = ['Lorem', 'nemo', 'sequi', 'we'];

const divs = document.querySelectorAll('div');

// Iterate over the divs
divs.forEach(div => {

  // Assign the innerText of the current div
  // to a new variable called html
  let html = div.innerText;

  // Now iterate over the words
  arr.forEach(word => {

    // Create a global regex with that word
    const regex = new RegExp(word, 'g');

    // Replace all the instances of that word in the
    // html variable, and assign it back to that variable
    html = html.replaceAll(regex, (match) => {
      return `<span class="red">${match}</span>`;
    });
  });

  // Finally assign the html to back to the div
  div.innerHTML = html;

});
.red { color: red; }
div { margin-bottom: 1em; }
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur exercitationem maxime, aperiam saepe reprehenderit Lorem fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
</div>

<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium nemo.
</div>

<div>
Here, we have used a regular expression to match a certain portion of the string. We can capture certain groups in the match using matchAll() better than match().
</div>

于 2021-11-16T09:34:23.777 回答
1

这是你可以做的。没有检查它是否经过优化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="body">

    <div class="change-color">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur
        exercitationem maxime, aperiam saepe lorem fuga nemo ipsa labore rerum ex error fugiat quasi accusantium
        nemo.
    </div>


    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sed sequi quos veniam? Cum consectetur
        exercitationem maxime, aperiam saepe reprehenderit fuga ipsa labore rerum ex error fugiat quasi accusantium
        nemo.
    </div>

    <div>
        Here, we have used a regular expression to match a certain portion of the string. We can capture certain groups
        in the
        match using matchAll() better than match().
    </div>


    <script src="main.js"></script>

    <script>
        const searching = ["Lorem", "nemo"];
        const strings = document.querySelectorAll('.change-color').forEach(el => {
            let text = el.innerText;
            searching.map(search => {
                text = text.replaceAll(search, `<span style="color: red;">${search}</span>`);
            });
            // el.innerHTML = text;
            el.innerHTML = text;
            // console.log(el.innerText);
        })

    </script>

</body>

</html>

于 2021-11-16T09:28:53.703 回答