在HTML中搜索替换文本并保留格式的问题求助

以下是针对你实现HTML文本搜索高亮时遇到的三个问题的具体修复方法及优化后的代码：

原始实现代码 #

JavaScript #

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>");
      } 
    }

HTML #

<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>

遇到的问题 #

• 搜索后HTML格式丢失，<br>换行效果失效
• 输入.时会高亮全部文本
• 删除搜索词后仍有单个字母保持高亮

问题分析与修复 #

1. 格式丢失问题 #

原因：使用textContent获取内容会剥离所有HTML标签，只保留纯文本，导致<br>等格式标签丢失。
修复：提前保存原始HTML内容的副本，每次搜索都基于原始内容进行替换，避免破坏原有结构。

2. 句号匹配全部文本问题 #

原因：.是正则表达式的特殊元字符，代表匹配任意单个字符，直接用输入内容创建正则会触发全局匹配。
修复：对输入内容中的正则特殊字符进行转义，确保它们被当作普通字符处理。

3. 删除搜索词后仍有高亮问题 #

原因：原始代码仅处理了输入非空的情况，未考虑输入为空时的恢复逻辑。
修复：添加输入为空的判断，将内容重置为原始HTML。

优化后的完整代码 #

JavaScript #

// 保存原始HTML内容，避免每次操作破坏格式
const contentElement = document.getElementById("content");
const originalHTML = contentElement.innerHTML;

function search() {
    let input = document.getElementById("input").value.trim();
    
    if (input === "") {
        // 输入为空时恢复原始内容
        contentElement.innerHTML = originalHTML;
        return;
    }

    // 转义正则特殊字符：. * + ? ^ $ { } ( ) | [ ] \
    const escapedInput = input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // 创建不区分大小写的正则表达式
    const regExp = new RegExp(escapedInput, "gi");
    
    // 基于原始HTML进行替换，保留原有格式
    contentElement.innerHTML = originalHTML.replace(regExp, '<span style="background-color:yellow;">$&</span>');
}

HTML #

<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>

内容的提问来源于stack exchange，提问作者humaira tayyab