如何使用HTML与JavaScript实现页面文本自定义替换功能

原有代码问题 #

• DOM元素获取逻辑错误：搜索输入框、替换输入框的ID匹配错误，全部错误指向了文本展示的h1节点
• 取值逻辑缺失：获取DOM节点后未读取对应文本内容、输入框值，直接对DOM对象调用字符串替换方法会触发报错
• 替换按钮未绑定触发事件，点击按钮无响应
• 正则未做特殊字符转义，输入带正则特殊符号的搜索词时会出现匹配异常
• 直接修改原始文本节点内容，多次替换时会基于上次修改后的内容匹配，容易出现非预期结果

可运行完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>文本替换工具</title>
</head>
<body>
    <h1 id="text">Steve Jobs was genuis, and many Apple inventions today are result for his great effort, thanks Steve, waw Steve was great.</h1>
    <label>search for:</label>
    <br />
    <input type="text" id="searchInput" />
    <br />
    <label>Replace with:</label>
    <br />
    <input type="text" id="replaceInput" />
    <br />
    <br />
    <input type="button" value="Replace" onclick="replacement()"/>

    <script>
        // 保存原始文本，每次替换都基于原始内容处理，避免多次替换互相干扰
        const originText = document.getElementById('text').innerText;
        // 转义正则特殊字符，避免输入特殊符号时匹配异常
        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }
        function replacement() {
            // 获取输入的搜索词和替换词
            const searchWord = document.getElementById('searchInput').value.trim();
            const replaceWord = document.getElementById('replaceInput').value;
            // 搜索词为空时不做处理
            if (!searchWord) return;
            // 全局匹配替换
            const replacedText = originText.replace(new RegExp(escapeRegExp(searchWord), 'g'), replaceWord);
            // 把替换后的内容写回页面
            document.getElementById('text').innerHTML = replacedText;
        }
    </script>
</body>
</html>

使用说明 #

• 打开页面后，在第一个输入框填写需要查找替换的目标词汇
• 在第二个输入框填写替换后的自定义词汇
• 点击Replace按钮，即可将文本中所有匹配的目标词汇替换为自定义内容
• 每次替换都基于最开始的原始文本执行，不会因为多次替换出现内容混乱

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