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

Question

我有这个代码来查找和突出显示html 中的文本

const p = document.getElementById("content");
function search() {
let input = document.getElementById("input").value;
if (input !== "") {
let regExp = new RegExp(input, "gi");
p.innerHTML = (p.textContent).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.
<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>

我有三个问题：

1. 搜索后HTML的格式被删除，换行符在搜索后不起作用
2. 搜索句号会突出显示整个文本
3. 删除搜索词后，仍会突出显示一个字母

Answer 1

1. 搜索格式被破坏，因为p.textContent忽略html
2. 输入=="quot；不要让荧光笔运行，如果空的
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>

}