Find and highlight word in text using JS
12,989
Solution 1
Here is my solution. I found there are two ways to achieve this. In Firefox, you can use selection api. Unfortunately, it will not work in Chrome. A simpler solution is to just match the search text and highlight it by enclosing it in <mark>
tags.
var opar = document.getElementById('paragraph').innerHTML;
function highlight() {
var paragraph = document.getElementById('paragraph');
var search = document.getElementById('typed-text').value;
search = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); //https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
var re = new RegExp(search, 'g');
var m;
if (search.length > 0)
paragraph.innerHTML = opar.replace(re, `<mark>$&</mark>`);
else paragraph.innerHTML = opar;
}
<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" onkeyup="highlight()">
</div>
</div>
</div>
</div>
The idea is very simple. On keyup
event (when the user finishes pressing a key), highlight
function will search for all occurances in the text and then highlights them using <mark>
tags.
Solution 2
Use this example:
var input = document.getElementById('typed-text');
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();
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>
Author by
Vagif Aghayev
Updated on June 04, 2022Comments
-
Vagif Aghayev almost 2 years
I'm new in Javascript. I have a question: how to highlight word in text, which is typed in input. I could only done part which check if this word is in text, but could not highlight this word in text. Thanks everyone in advance!
var paragraph = document.getElementById('paragraph').innerText; //PARAGRAPH input = document.getElementById('typed-text').value; //TYPED TEXT textIncludes = paragraph.includes(input); // TEXT INCLUDES WORD if (textIncludes === true) { alert('Word has been found') } else { alert('No matches found') }
<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>
-
jrook over 5 yearsIf you just press Enter without typing any characters, it will match everything and display
2328 words has been found
. You need to add an input length check to your function. Also, html5 has the<mark>
tag which might be a better choice for highlighting selected text. Finally, my answer provides highlighting as the user types their query. -
jrook over 5 yearsFinally, searching for parentheses causes a syntax error in this code. You need to escape special characters before starting the search. Refer to my answer or here to see how to do that.
-
Vagif Aghayev over 5 yearsThank you very much for your answer. Your answer is really good. But it's too complicated for me to understand now (my knowledge in JS is not so good yet)
-
jrook over 5 years@VaqifAghayev, simplified the answer. Please check it out.
-
Vagif Aghayev over 5 yearsGreat. Thank you! I understand it now
-
jrook over 5 years@VaqifAghayev, removed a few more lines leftover from before the edits! It should be more clear now as to what is happening in the code. Feel free to ask any question and I will elaborate on the part that might look confusing
-
Максим Грабов almost 3 years@jrook Thank you for your answer. I have more complicated problem. Can I type a phrase in the input field and in text highlight every word from input?
-
Marcuzio Developuzio about 2 yearsWhat is the utility of var m??
-
jrook about 2 yearsSeems like something I forgot to remove. I edited it out.