Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

color background words in the text? – Artificial Intelligence

I have this code , but i have a list of word like :

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

i want to color the background of words in the text :

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

my code 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>

i want to have in output this code with the colors according to the words in the lists , red for liste1 and green for liste2, thank you very much

Tags:

3

Answers


  1. 0

    Then you just need to look up to see which list it’s in.

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

    (You don’t say what should happen if the entered value is found in neither list.)

    Login or Signup to reply.
  2. 0

    I added two if conditions using indexOf() to access an array of data. Also, you need to declare an array at the beginning of the logic:

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

    Did I understand your question correctly?

    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>
    Login or Signup to reply.
  3. 0

    Here is another take on it. I organised colors and patterns in a common colors object. This is then processed by a nested loop on the Object.entries() and then on the color-array’s elements:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search