javascript - 更改与搜索词匹配的段落中单词的颜色

Question

我有一个真正在 javascript 中搜索并显示结果的字段，但结果单独出现。我想从整篇文章中将其显示为颜色更改为红色
代码

var string  = document.getElementById("one").innerHTML;
var elDemo  = document.getElementById("one"); 

function getPortions(queryString, string) {
  var results = [];
  if(queryString.length > 0){
    var rgxp = new RegExp("(\\S*)?("+ queryString +")(\\S*)?", "ig");
    string.replace(rgxp, function(match, $1, $2, $3){
      results.push( ($1||"") +"<b>"+ $2 +"</b>"+ ($3||"") );
    });
  }
  return results;
}

document.getElementById("txt1").addEventListener("input", function(){
  var result = getPortions(this.value, string);
  elDemo.innerHTML = result.join(" "); 
});

<input type="search"class="form-control" id="txt1" placeholder="search" aria-label="Username" aria-describedby="basic-addon1">

<div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusantium facilis facere et ipsum quas itaque voluptatum similique at autem ullam quidem magni error maxime laborum nihil optio cupiditate, magnam fuga. Expedita, aliquam dignissimos veniam cupiditate assumenda nesciunt quod perferendis, rem dolor harum ipsa ullam. Nihil similique voluptate mollitia veniam!</div>

Answer 1

尝试返回替换的整个结果，而不是创建数组并稍后加入。
IE。

return string.replace(rgxp, (match) => "<b style=\"color: red;\">"+ match +"</b>")

var string  = document.getElementById("one").innerHTML;
var elDemo  = document.getElementById("one"); 

function getPortions(queryString, string) {
  var results = [];
  if(queryString.length > 0){
    var rgxp = new RegExp("(\\S*)?("+ queryString +")(\\S*)?", "ig");
    return string.replace(rgxp, (match) => "<b style=\"color: red;\">"+ match +"</b>")
  }
  return results;
}

document.getElementById("txt1").addEventListener("input", function(){
  if (!this.value) {
    elDemo.innerHTML = string
    return
  }
  var result = getPortions(this.value, string);
  elDemo.innerHTML = result;
});

<input type="search" reauired class="form-control" id="txt1" placeholder="search" aria-label="Username" aria-describedby="basic-addon1">
<div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusantium facilis facere et ipsum quas itaque voluptatum similique at autem ullam quidem magni error maxime laborum nihil optio cupiditate, magnam fuga. Expedita, aliquam dignissimos veniam cupiditate assumenda nesciunt quod perferendis, rem dolor harum ipsa ullam. Nihil similique voluptate mollitia veniam!</div>