在不删除 html 格式的情况下搜索和替换 HTML 中的文本

Answer 1

格式丢失，因为您正在使用p.textContent仅包括文本。

在我的回答中，我删除了每个键的所有跨度，这样它将解决清空现有搜索的问题，仍然突出显示第一个字母。另外，我正在使用p.innerHTML在里面搜索，这样我就不会丢失过去的格式。

另外，我没有使用正则表达式，因为这对于解析 HTML 是不可靠的。

const p = document.getElementById("content");

function search() {
  let input = document.getElementById("input").value;
  spans = p.querySelectorAll("span");

  spans.forEach(function(span){
    span.outerHTML = span.innerText;
  })

  if (input !== "") {
    let regExp = new RegExp(input, "gi");
    p.innerHTML = (p.innerHTML).replace(regExp, "<span style='background-color:yellow;'>$&</span>");

  }
}

<nav class="navbar navbar-light bg-light justify-content-between">
  <div class="container-fluid">
    <h1 class="navbar-brand col-sm">HTML Search Bar</h1>
    <input class="form-control col-6" type="text" placeholder="Search" aria-label="Search" id="input" onkeyup="search();">
  </div>
</nav>
<div id="content">
  Phasellus consequat congue neque ac consequat. Proin ultricies risus lorem, et scelerisque lectus imperdiet vitae. Vestibulum pretium eget mauris a interdum. Donec a justo nisl. Morbi vel ante eget lectus euismod auctor. Duis interdum lobortis eros at
  tincidunt. Proin id egestas lectus, eu varius enim. Aliquam elit arcu, dictum at cursus non, dignissim eleifend augue. Pellentesque iaculis quis felis eu ullamcorper. Duis at sollicitudin magna, ac gravida lectus. Phasellus consectetur neque tellus,
  a auctor lacus fringilla eget. Proin arcu orci, auctor eu diam vitae, ultricies tincidunt dolor. Nunc sit amet magna nisl. Vivamus at nisl mattis nulla aliquam semper. NEW LINE
  <br>
  <br>
  <br> Nullam convallis leo vel magna vulputate, sed tempor nibh elementum. Cras a dui vitae odio posuere interdum. Nam interdum consequat convallis. Fusce dolor ligula, sollicitudin sed massa sed, tempus imperdiet mi. Donec vel mauris nec velit volutpat
  dictum. Vivamus ut erat quam. Aliquam rhoncus elit venenatis imperdiet blandit. Proin feugiat accumsan nibh quis rutrum. Quisque consequat lacinia risus id vulputate. Etiam tristique quis odio sed consequat. In in justo pharetra, dignissim metus at,
  sollicitudin elit. Nullam vulputate turpis libero, quis sodales ante volutpat non.
</div>

Answer 2

1. 搜索格式中断，因为 p.textContent 忽略了 html
2. input !=="" 不允许运行荧光笔，我们必须删除它，如果 空的
3. 正则表达式忽略。你可以更换 .和 ”\。”工作用

   const p = document.getElementById("content");
   let phtml = p.innerHTML;
   
   function search() {
       let input = document.getElementById("input").value;
       if (input !== "") {
           input = input.replace('.', "\\.");
           let regExp = new RegExp(input, "gi");
           p.innerHTML = (phtml).replace(regExp, "<span style='background-color:yellow;'>$&</span>");
   
       } else {
           let regExp1 = new RegExp("<span style='background-color:yellow;'>*</span>", "gi");
           p.innerHTML = (phtml).replace(regExp1, "$&");
       }
   }

   <nav class="navbar navbar-light bg-light justify-content-between">
       <div class="container-fluid">
         <h1 class="navbar-brand col-sm">HTML Search Bar</h1>
         <input class="form-control col-6" type="text" placeholder="Search" aria-label="Search" id="input"
           onkeyup="search();">
       </div>
     </nav>
    <div id="content">
   Phasellus consequat congue neque ac consequat. Proin ultricies risus lorem, et scelerisque lectus imperdiet vitae. Vestibulum pretium eget mauris a interdum. Donec a justo nisl. Morbi vel ante eget lectus euismod auctor. Duis interdum lobortis eros at tincidunt. Proin id egestas lectus, eu varius enim. Aliquam elit arcu, dictum at cursus non, dignissim eleifend augue. Pellentesque iaculis quis felis eu ullamcorper. Duis at sollicitudin magna, ac gravida lectus. Phasellus consectetur neque tellus, a auctor lacus fringilla eget. Proin arcu orci, auctor eu diam vitae, ultricies tincidunt dolor. Nunc sit amet magna nisl. Vivamus at nisl mattis nulla aliquam semper.
   <br>
   <br>
   <br>
   Nullam convallis leo vel magna vulputate, sed tempor nibh elementum. Cras a dui vitae odio posuere interdum. Nam interdum consequat convallis. Fusce dolor ligula, sollicitudin sed massa sed, tempus imperdiet mi. Donec vel mauris nec velit volutpat dictum. Vivamus ut erat quam. Aliquam rhoncus elit venenatis imperdiet blandit. Proin feugiat accumsan nibh quis rutrum. Quisque consequat lacinia risus id vulputate. Etiam tristique quis odio sed consequat. In in justo pharetra, dignissim metus at, sollicitudin elit. Nullam vulputate turpis libero, quis sodales ante volutpat non.
   </div>

   }