使用indexOf()实现文本搜索并将匹配字符串标红的JS开发问题

实现方案&修正代码 #

你原有代码存在几个问题：

• 没有引入jQuery却使用了$("rslt").html()写法，且id选择器缺少#前缀
• 替换逻辑冗余绕路，不符合「仅使用indexOf实现匹配逻辑」的要求
• span标签存在多余的??占位符
• 空值判断逻辑冗余，经过trim处理后的值不可能是单独空格

以下是符合要求的完整实现，核心匹配逻辑纯靠indexOf完成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关键词标红搜索</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <label>
        搜索关键词：
        <input id='keyword' type="text" size="10" required>
    </label>
    <br><br><br>
    <label>
        待匹配文本：
        <textarea id="content" name="content" rows="4" cols="50"></textarea>
    </label>
    <br><br>
    <button onclick="searchHighlight();" type="button">搜索标红</button>
    <div id='result' style='text-align: center;font-size: 1em; font-weight: bolder;'></div>
    <script>
        function searchHighlight() {
            const keyword = document.getElementById("keyword").value.trim();
            const originContent = document.getElementById("content").value.trim();
            const resultDom = document.getElementById("result");

            // 空值校验
            if (!keyword || !originContent) {
                resultDom.innerHTML = "请输入搜索关键词和待匹配文本";
                return;
            }

            const keywordLen = keyword.length;
            let currentIndex = 0;
            let htmlStr = '';
            // 仅用indexOf实现全量匹配定位
            let matchIndex = originContent.indexOf(keyword, currentIndex);

            while (matchIndex !== -1) {
                // 拼接匹配位置之前的普通文本
                htmlStr += originContent.slice(currentIndex, matchIndex);
                // 拼接被span包裹的标红关键词
                htmlStr += `<span class="highlight">${originContent.slice(matchIndex, matchIndex + keywordLen)}</span>`;
                // 移动索引到当前匹配项之后，继续查找
                currentIndex = matchIndex + keywordLen;
                matchIndex = originContent.indexOf(keyword, currentIndex);
            }
            // 拼接最后一段无匹配的剩余文本
            htmlStr += originContent.slice(currentIndex);

            resultDom.innerHTML = htmlStr;
        }
    </script>
</body>
</html>

逻辑说明 #

• 通过indexOf(搜索词, 起始查找位置)循环定位所有匹配的关键词位置
• 每次定位到匹配项后，依次拼接普通文本、标红关键词到结果字符串
• 全部匹配项查找完成后拼接剩余普通文本，渲染到结果容器
• 全程未使用replace方法，完全符合仅用indexOf实现匹配逻辑的要求

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