前端js实现模糊搜索和拼音搜索

前端在列表搜索功能中，经常遇到有很多属性的列表，属性的内容可能还有汉字，精准匹配太局限了，搜索条件需要很精准。

通过正则表达式进行模糊匹配

//input为输入的搜索内容
//生成input正则表达式进行模糊匹配
let inputArr = input.split("");
let str = "(.*?)";//正则条件
let regStr = str + inputArr.join(str) + str;
let reg = RegExp(regStr, "i"); // 以12为例生成的正则表达式为/(.*?)1(.*?)2(.*?)/i
//reg为生成的正则表达式

利用 pinyin 进行汉字转字符串

pinyin的下载

npm install pinyin@alpha --save

引用和使用

import pinyin from 'pinyin'//将拼音转成字符串数组
let valuePyArr = pinyin("我是你爹",{style:"normal"});
//{style:"normal"}参数将生成的拼音改为不带声调的（默认带声调）
//结果为 [ ["wo"], ["shi"], ["ni"], ["die"] ]//将字符串数组转成字符串
let valuePy = valuePyArr.join("");
//结果为 "woshinidie"

筛选数组逻辑

this.problems.filter((problem) => {//keys方法获取对象可迭代属性，some方法进行存在性匹配return Object.keys(problem).some((key) => {return 判断条件});
});

完整代码

searchedProblems是vue的计算属性

searchedProblems() {var input = this.searchValue;  //searchValue为input中的v-model参数if (input) {//生成input正则表达式进行模糊匹配let inputArr = input.split("");let str = "(.*?)";//正则条件let regStr = str + inputArr.join(str) + str;// 以12为例生成的正则表达式为/(.*?)1(.*?)2(.*?)/ilet reg = RegExp(regStr, "i"); //过滤数组return this.problems.filter((data) => {//keys获取数组可迭代属性，some方法遍历所有属性进行存在验证return Object.keys(data).some((key) => {//将汉字属性转换成字符串数组let dataPyArr = pinyin(data[key],{style:"normal"});//将字符串数组转成字符串let dataPy = dataPyArr.join('')//搜索内容和每个value值 匹配return reg.test(dataPy)});});}return this.problems;}

前端js实现模糊搜索和拼音搜索相关推荐

前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...
select2.js插件新增支持拼音搜索
话不多说直奔主题 1.拼音搜索的原理: 将下拉框选项中的中文转换成汉语拼音,然后与输入的字母进行比较,如果包含则被检索出来. 2.效果: 3.在select2.js中找到matcher 方法,对此方法 ...
前端js实现中文转拼音 --- 完整解决方案
资料: 使用到的库 :一个实现汉字与拼音互转的小巧web工具库作者本人的博客园文章:[干货]JS版汉字与拼音互转终极方案,附简单的JS拼音输入法作者本人的博客文章:[干货]JS版汉字与拼音互转终极 ...
select2.js实现拼音搜索支持
拼音搜索的原理: 将下拉框选项中的中文转换成汉语拼音(或拼音首字母),然后与输入的字母进行比较,如果包含则被检索出来. 引用插件: 1. pinyin.js文件用于将汉字转化为拼音的JavaScrip ...
如何避免Puppeteer被前端JS检测
工具和资料 QQ群 - Javascript高级爬虫https://jq.qq.com/?_wv=1027&k=5Bcu3YU -作者自建群,欢迎加入! 中国商标网加密接口https://gi ...
js实现汉字转拼音（解决首字母排序问题）
实现思路汉字有21个声母:b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s 有韵母24个,其中单韵母有6个:a, o, ...
【校招VIP】前端JS语言之语法相关
考点介绍: 简单来说JavaScript也是一门轻量级的编程语言,只是他可插入到HTML中,而后由浏览器执行. 一个完整的JavaScript基本由3部分组成: 第一部分:ECMAScript是核心 ...
华为云内容审核API调用前端 js uni-app
文章目录前言一.华为云的内容审核api的调用需要哪些东西? 二.使用步骤 1.先注册一个华为云的账号 2.申请内容审核服务 3.[华为云内容审核API的官方文档](https://support. ...
如何保护前端JS代码？前端js代码加密
Web前端JS代码需要保护吗? 这得具体情况具体分析. 1.如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能.那不需要保护. 2.如果是精心设计一个绚丽的特效,如果想要保护这段自己付 ...
Node.js实现网络新闻爬虫及搜索功能（一）
Node.js实现网络新闻爬虫及搜索功能(一) Node.js实现网络新闻爬虫及搜索功能(一) 项目要求一.爬虫部分 1. 引入相关包 2. 建立数据库连接 3. 爬取并解析网页首页 4. 爬取并解 ...

前端js实现模糊搜索和拼音搜索

通过正则表达式进行模糊匹配

利用 pinyin 进行汉字转字符串

筛选数组逻辑

完整代码

前端js实现模糊搜索和拼音搜索相关推荐

最新文章

热门文章