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

来源：互联网发布：企业淘宝账户怎么注册编辑：程序博客网时间：2024/06/08 07:28

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>搜索数据，显示符合条件的内容，并显示出红色</title></head><body><input type="text" id="search"><input type="button" value="search" onclick="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>

1 0