使用JS查找并突出显示文本中的单词 [英] Find and highlight word in text using JS

问题描述

我是Java语言的新手.我有一个问题:如何在输入中键入的文本中突出显示单词.我只能完成检查该词是否在文本中的部分，而不能在文本中突出显示该词.提前谢谢大家！

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>

推荐答案

这是我的解决方案.我发现有两种方法可以实现此目的.在Firefox中，您可以使用选择api .不幸的是，它无法在Chrome中运行.一个更简单的解决方案是仅匹配搜索文本并通过将其包含在<mark>标记中来突出显示该文本.

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>

这个想法很简单.在keyup事件上(当用户完成按键操作时)，highlight功能将搜索文本中的所有事件，然后使用<mark>标签突出显示它们.

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.

这篇关于使用JS查找并突出显示文本中的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！