js正则实现前端搜索，匹配字符加红

最新推荐文章于 2023-04-10 16:55:41 发布

cangowu

最新推荐文章于 2023-04-10 16:55:41 发布

阅读量1.1w

点赞数 2

分类专栏： javascript 文章标签：搜索 javascript

本文链接：https://blog.csdn.net/wzgdjm/article/details/51768723

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、介于公司需要，要开发一个比较简易的笔记本功能，里面要实现按照标题搜索，显示匹配项目，并在匹配项的字符加红显示，中间有空格的可以匹配任何字符。

二、具体的直接看源码吧，这里只是实现一下功能，就没有怎么注意代码的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索数据，显示符合条件的内容，并显示出红色</title>
</head>
<body>

<input type="text" id="search">
<input type="button" value="search" οnclick="Submit()">
<div id="content"></div>

<script src="NotesHelp.js"></script>
<script>

    var data = [
        {
            "NoteID": "b89d9991-3538-439e-8a60-bbc097765a17",
            "Title": "张三的笔记",
            "Content": "测试笔记",
            "AddDate": "2016-06-24 10:27:46"
        }, {
            "NoteID": "b89d9991-3538-439e-8a60-bbc097765a17",
            "Title": "李四的笔记",
            "Content": "测试笔记",
            "AddDate": "2016-06-24 10:27:46"
        },
        {
            "NoteID": "5903b14d-7108-4a5f-b81c-fec208b9ee19",
            "Title": "王五的笔记",
            "Content": "< p > 内容 < / p > ",
            "AddDate": "2016-06-25 17:12:41"
        },
        {
            "NoteID": "5903b14d-7108-4a5f-b81c-fec208b9ee19",
            "Title": "张四的笔记",
            "Content": "< p > 内容 < / p > ",
            "AddDate": "2016-06-25 17:12:41"
        }
    ];
    //    var search = document.getElementById('search').value;

    function searchNotes(data, value) {
        var aData = [],
                aSearch = value.split(' '),
                k = 0,
                regStr = '',
                reg;
//                reg = new RegExp("(测)([\\s\\S]*)(你)([\\s\\S]*)(吗)");
        for (var r = 0, lenR = aSearch.length; r < lenR; r++) {
            regStr += '(' + aSearch[r] + ')([\\s\\S]*)';
        }
        reg = new RegExp(regStr);

        for (var i = 0, lenI = data.length; i < lenI; i++) {
            var title = data[i].Title,
                    regMatch = title.match(reg),
                    searchData = {};
            k = 0;
            if (regMatch !== null) {
                var replaceReturn = "";
                for (var j = 1, lenJ = regMatch.length; j < lenJ; j++) {
                    if (regMatch[j] === aSearch[k]) {
                        replaceReturn += '<span style="color:red;">$' + j + '</span>';
                        k++;
                    } else {
                        replaceReturn += '$' + j;
                    }
                }

                for (var obj in data[i]) {
                    if (data[i].hasOwnProperty(obj)) {
                        searchData[obj] = data[i][obj];
                    }
                }
                searchData.Title = searchData.Title.replace(reg, replaceReturn);//.replace(reg, replaceReturn);
                aData.push(searchData);
            }
        }
        return aData;
    }

    /*    var aNotes = searchNotes(data, search);

     var sNotes = '';
     for (var i = 0, len = aNotes.length; i < len; i++) {
     sNotes += aNotes[i].Title + '</br>';
     }

     document.getElementById('content').innerHTML = sNotes;*/

    function Submit() {
        var search = document.getElementById('search').value;
        var aNotes = searchNotes(data, search);
//        console.log(data);
        var sNotes = '';
        for (var i = 0, len = aNotes.length; i < len; i++) {
            sNotes += aNotes[i].Title + '</br>';
        }

        document.getElementById('content').innerHTML = sNotes;
    }

</script>
</body>
</html>

cangowu

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
7
评论
js正则实现前端搜索，匹配字符加红

一、介于公司需要，要开发一个比较简易的笔记本功能，里面要实现按照标题搜索，显示匹配项目，并在匹配项的字符加红显示，中间有空格的可以匹配任何字符。二、具体的直接看源码吧，这里只是实现一下功能，就没有怎么注意代码的封装搜索数据，显示符合条件的内容，并显示出红色 var data = [ {
复制链接

扫一扫