文字中的颜色背景词？

Question

我有这个代码，但是我有一个单词列表，比如：

 liste1= ["Robotics","machines","engineering"]
 liste2= ["and","that","of"] 

我想在课文中把单词的背景涂上颜色：

if word in the text is in the liste1 , color the background with "red" color
if word in the text is in the liste2 , color the background with "green" color

我的代码html：

​

<div id="highlights">
        <div class="container">
            <div class="row">
                <div class="col-md-12" id="paragraph">
                    <p>
                        Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronics engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and use of robots, as well as computer systems for their control, sensory feedback, and information processing.
                        These technologies are used to develop machines that can substitute for humans and replicate human actions. Robots can be used in many situations and for lots of purposes, but today many are used in dangerous environments (including bomb detection and deactivation), manufacturing processes, or where humans cannot survive (e.g. in space). Robots can take on any form but some are made to resemble humans in appearance. This is said to help in the acceptance of a robot in certain replicative behaviors usually performed by people. Such robots attempt to replicate walking, lifting, speech, cognition, and basically anything a human can do. Many of today's robots are inspired by nature, contributing to the field of bio-inspired robotics.
                        The concept of creating machines that can operate autonomously dates back to classical times, but research into the functionality and potential uses of robots did not grow substantially until the 20th century.[1] Throughout history, it has been frequently assumed that robots will one day be able to mimic human behavior and manage tasks in a human-like fashion. Today, robotics is a rapidly growing field, as technological advances continue; researching, designing, and building new robots serve various practical purposes, whether domestically, commercially, or militarily. Many robots are built to do jobs that are hazardous to people such as defusing bombs, finding survivors in unstable ruins, and exploring mines and shipwrecks. Robotics is also used in STEM (science, technology, engineering, and mathematics) as a teaching aid.
                        Robotics is a branch of engineering that involves the conception, design, manufacture, and operation of robots. This field overlaps with electronics, computer science, artificial intelligence, mechatronics, nanotechnology and bioengineering.
                    </p>
                </div>
                <div class="col-md-12 input-group mt-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">
                            <i class="fas fa-pencil-alt"></i>
                        </span>
                    </div>
                   
                </div>
            </div>
        </div>
    </div>

​

我想输出这段代码，并根据列表中的单词显示颜色，红色表示liste1，绿色表示liste2，非常感谢

Answer 1

这是另一个例子。我在一个常见的colors对象中组织了颜色和图案。然后由Object.entries()上的嵌套循环以及颜色数组的元素进行处理：

​

const colors={red:["Robotics","machines","engineering"],
              blue:["and","that","of"]};
const p=document.querySelector("#paragraph p");
var txt=p.textContent;

Object.entries(colors).forEach(([col,pats])=>
  pats.forEach(pat=>
    txt=txt.replace(new RegExp(pat,'gi'),'<span class="'+col+'">$&</span>') ) );
p.innerHTML=txt;

.red {background-color:pink}
.blue {background-color:lightblue}

<div id="highlights">
        <div class="container">
            <div class="row">
                <div class="col-md-12" id="paragraph">
                    <p>
                        Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronics engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and use of robots, as well as computer systems for their control, sensory feedback, and information processing.
                        These technologies are used to develop machines that can substitute for humans and replicate human actions. Robots can be used in many situations and for lots of purposes, but today many are used in dangerous environments (including bomb detection and deactivation), manufacturing processes, or where humans cannot survive (e.g. in space). Robots can take on any form but some are made to resemble humans in appearance. This is said to help in the acceptance of a robot in certain replicative behaviors usually performed by people. Such robots attempt to replicate walking, lifting, speech, cognition, and basically anything a human can do. Many of today's robots are inspired by nature, contributing to the field of bio-inspired robotics.
                        The concept of creating machines that can operate autonomously dates back to classical times, but research into the functionality and potential uses of robots did not grow substantially until the 20th century.[1] Throughout history, it has been frequently assumed that robots will one day be able to mimic human behavior and manage tasks in a human-like fashion. Today, robotics is a rapidly growing field, as technological advances continue; researching, designing, and building new robots serve various practical purposes, whether domestically, commercially, or militarily. Many robots are built to do jobs that are hazardous to people such as defusing bombs, finding survivors in unstable ruins, and exploring mines and shipwrecks. Robotics is also used in STEM (science, technology, engineering, and mathematics) as a teaching aid.
                        Robotics is a branch of engineering that involves the conception, design, manufacture, and operation of robots. This field overlaps with electronics, computer science, artificial intelligence, mechatronics, nanotechnology and bioengineering.
                    </p>
                </div>
            </div>
        </div>
    </div>

​

Answer 2

然后你只需要抬头看看它在哪一个列表中。

paragraph.innerHTML = paragraph.textContent.replace(regexp, () => {
    let col = liste1.includes(this.value) ? 'red' : 'green';
    return '<span style="color:'+col+'">' + this.value + '</span>'
});

(如果输入的值在两个列表中都没有找到，您就不会说应该发生什么。)

Answer 3

我添加了两个if条件，使用indexOf()访问数据数组。此外，您还需要在逻辑的开头声明一个数组：

var liste1 = ["Robotics","machines","engineering"];
var liste2 = ["and","that","of"];

我没听错你的问题吗？

​

var input = document.getElementById('typed-text');
var liste1 = ["Robotics","machines","engineering"];
var liste2 = ["and","that","of"];

input.onkeydown = function (e) {

    if (e.keyCode === 13) {

        var paragraph = document.getElementById('paragraph');
        var result = document.querySelector('.result-output');
        var regexp = new RegExp(this.value, 'g');
        var textIncludes = paragraph.textContent.match(regexp);
            
        if (result)
            result.remove();
      
  if (liste1.indexOf(this.value) >= 0) {
    paragraph.innerHTML = paragraph.textContent.replace(regexp,
    '<span style="color:white; background: red;">' + this.value + '</span>');
  } else if (liste2.indexOf(this.value) >= 0) {
    paragraph.innerHTML = paragraph.textContent.replace(regexp,
    '<span style="color:white; background: green;">' + this.value + '</span>');
  } else 
  {      
    paragraph.innerHTML = paragraph.textContent.replace(regexp,
    '<span style="color:red">' + this.value + '</span>');
  }
        

        paragraph.insertAdjacentHTML(
            'afterend',
            '<span class="result-output" style="display: block; padding: 5px; margin-top: 10px; background: #eee; color: green;">' + (textIncludes ? textIncludes.length : 0) + ' words has been found.</span>');
            
    }

}

<div id="highlights">
        <div class="container">
            <div class="row">
                <div class="col-md-12" id="paragraph">
                    <p>
                        Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronics engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and use of robots, as well as computer systems for their control, sensory feedback, and information processing.
                        These technologies are used to develop machines that can substitute for humans and replicate human actions. Robots can be used in many situations and for lots of purposes, but today many are used in dangerous environments (including bomb detection and deactivation), manufacturing processes, or where humans cannot survive (e.g. in space). Robots can take on any form but some are made to resemble humans in appearance. This is said to help in the acceptance of a robot in certain replicative behaviors usually performed by people. Such robots attempt to replicate walking, lifting, speech, cognition, and basically anything a human can do. Many of today's robots are inspired by nature, contributing to the field of bio-inspired robotics.
                        The concept of creating machines that can operate autonomously dates back to classical times, but research into the functionality and potential uses of robots did not grow substantially until the 20th century.[1] Throughout history, it has been frequently assumed that robots will one day be able to mimic human behavior and manage tasks in a human-like fashion. Today, robotics is a rapidly growing field, as technological advances continue; researching, designing, and building new robots serve various practical purposes, whether domestically, commercially, or militarily. Many robots are built to do jobs that are hazardous to people such as defusing bombs, finding survivors in unstable ruins, and exploring mines and shipwrecks. Robotics is also used in STEM (science, technology, engineering, and mathematics) as a teaching aid.
                        Robotics is a branch of engineering that involves the conception, design, manufacture, and operation of robots. This field overlaps with electronics, computer science, artificial intelligence, mechatronics, nanotechnology and bioengineering.
                    </p>
                </div>
                <div class="col-md-12 input-group mt-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">
                            <i class="fas fa-pencil-alt"></i>
                        </span>
                    </div>
                    <input id="typed-text" type="text" class="form-control" placeholder="Type text">
                </div>
            </div>
        </div>
    </div>

​