javascript - 使用 JS 查找并突出显示文本中的单词
问题描述
我是 Javascript 新手。我有一个问题:如何突出显示输入中输入的文本中的单词。我只能检查这个词是否在文本中,但不能在文本中突出显示这个词。提前谢谢大家!
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>
解决方案
这是我的解决方案。我发现有两种方法可以实现这一点。在 Firefox 中,您可以使用selection api。不幸的是,它在 Chrome 中不起作用。一个更简单的解决方案是仅匹配搜索文本并通过将其包含在<mark>
标签中来突出显示它。
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>
这个想法很简单。在keyup
事件发生时(当用户完成按键时),highlight
函数将搜索文本中的所有出现,然后使用<mark>
标签突出显示它们。
推荐阅读
- javascript - CKEDITER 不显示 .webp 图像文件
- javascript - 如何在表单验证中只追加一次?
- java - 50 次尝试,1 次根本不是答案
- javascript - 将以下 Python 代码转换为基于 JavaScript 的 Google Apps 脚本代码
- docker - 变量不正确进入詹金斯 docker.inside()
- firebase - 如何将动态地图对象从 Firestore 映射到 Flutter 以及从 Flutter 到 Firestore?
- visual-studio - 为未处理的异常中断时使用的 Visual Studio 字体和颜色设置的名称?
- python - 如何使用 python 中的 Pmw 模块更改工具提示的颜色?
- python - 连续红色后获取熊猫值
- r - 如果满足条件并且字符串值包含在字符向量中,则在 R 中循环遍历行,将新列值设置为字符向量元素