摘要:正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。
Day06 - Fetch、filter、正则表达式实现快速古诗匹配
效果图作者:©liyuechun
简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整中文版指南及视频教程在 从零到壹全栈部落。
在输入框中搜索字或者某个词快速匹配含有这个字或者是词的诗句。
涉及特性flex布局
nth-child奇偶匹配
linear-gradient颜色渐变
transform
Fetch
Array
filter()
map()
push()
join()
...
JavaScript RegExp 对象
字面量语法
创建 RegExp 对象的语法
修饰符i、g
match()
replace()
实现步骤UI布局
通过Fetch下载数据
数据处理并保存
事件监听
数据匹配操作
新数据替换展示
布局篇HTML代码
CSS代码
html { box-sizing: border-box; margin: 0px; background-color: rgb(145, 182, 195); font-family: "Kaiti", "SimHei", "Hiragino Sans GB ", "helvetica neue"; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; } body { display: flex; justify-content: center; } .search-form { max-width: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; } input.search { padding: 20px; font-family: "Kaiti", "helvetica neue"; margin: 0; border: 10px solid #f7f7f7; font-size: 40px; text-align: center; width: 120%; outline: 0; border-radius: 5px; position: relative; top: 10px; left: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); } .suggestions { margin: 0; padding: 0; position: relative; top: 7px; width: 100%; } .suggestions li { background: white; list-style: none; border-bottom: 1px solid #D8D8D8; box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); margin: 0; padding: 20px; display: flex; flex-direction: column; /*align-items: flex-start;*/ } span.title { margin-right: 20px; text-align: right; color: #7c8e94; margin-top: 5px; } span.hl { color: green; } /*偶数匹配*/ .suggestions li:nth-child(even) { transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%); } /*奇数匹配*/ .suggestions li:nth-child(odd) { transform: perspective(100px) rotateX(-3deg) translateY(3px); background: linear-gradient(to top, #ffffff 0%, #efefef 100%); }
CSS布局相关参考文档
CSS参考手册
CSS选择器笔记
flex布局完全入门教程
使用HTML5里的classList操作CSS类
position
通过Fetch下载数据解析并且保存const endpoint = "https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json"; const poetrys = []; fetch(endpoint) .then(blob => { return blob.json(); }) .then(data => { poetrys.push(...data); });
具体数据请求过程见下图:
Fetch详细使用文档
blob.json()是将数据转换为json数据,data为then函数中转换完的数据,在这个案例中,data是一个数组。
poetrys.push(...data)这句代码中的push是往数组里面新增对象,而...data代表的是将这个data数组中的数据一一的存储到poetrys数组中。
事件监听const search = document.querySelector(".search"); const suggestions = document.querySelector(".suggestions"); search.addEventListener("change", displayMatches); search.addEventListener("keyup", displayMatches);
获取search和suggestions"节点分别对change、keyup事件进行监听,当输入框中的内容发生变化或者键盘弹起时触发displayMatches函数更新数据。
数据匹配操作RegExp使用基础
RegExp参考文档
项目源码分析
function findMatches(wordToMatch, poetrys) { return poetrys.filter(poet => { // 正则找出匹配的诗句 const regex = new RegExp(wordToMatch, "gi"); const author = poet.detail_author.join(""); // console.log(author); return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex); }); } function displayMatches() { const matches = findMatches(this.value, poetrys); const regex = new RegExp(this.value, "gi"); const html = matches.map(poet => { // 替换高亮的标签 const text = poet.detail_text.replace(regex, `${ this.value }`); const title = poet.title.replace(regex, `${ this.value }`); const detail_author = poet.detail_author[0].replace(regex, `${ this.value }`); // 构造 HTML 值 return `
poetrys.filter会返回带搜索关键字的新数组。
const regex = new RegExp(this.value, "gi"); 代表匹配规则。
g:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
i:执行对大小写不敏感的匹配。
上面的这种写法等价于:"/this.value/gi"。
matches.map会返回一个按照新的规则处理完以后的新的数组。
title.replace(regex, "新字符串");表示将title字符串中满足 regex 规则的字符串替换成新字符串。
源码下载Github Source Code
社群品牌:从零到壹全栈部落
定位:寻找共好,共同学习,持续输出全栈技术社群
业界荣誉:IT界的逻辑思维
文化:输出是最好的学习方式
官方公众号:全栈部落
社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)
技术交流社区:全栈部落BBS
全栈部落完整系列教程:全栈部落完整电子书学习笔记
关注全栈部落官方公众号,每晚十点接收系列原创技术推送 |
---|
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112290.html
摘要:正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...
摘要:正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...
摘要:举例来说即便某个失败了,也不会导致的发生,这样在不在乎是否有项目失败,只要拿到都结束的信号的场景很有用。对于则稍有不同只要有子项,就会完成,哪怕第一个了,而第二个了,也会,而对于,这种场景会直接。 1. 引言 本周精读的内容是:Google I/O 19。 2019 年 Google I/O 介绍了一些激动人心的 JS 新特性,这些特性有些已经被主流浏览器实现,并支持 polyfill...
摘要:使用看完你就会正则表达式了四种操作验证切分提取替换第一章正则表达式字符匹配攻略正则表达式是匹配模式,要么匹配字符,要么匹配位置至少,至多匹配中的任一个字符范围表示法如果要匹配则要么要么要么通配符,表示几乎任意 API 使用 String#search String#split String#match String#replace RegExp#test Reg...
阅读 2091·2023-04-26 03:06
阅读 3496·2023-04-26 01:51
阅读 2038·2021-11-24 09:38
阅读 2411·2021-11-17 17:00
阅读 2253·2021-09-28 09:36
阅读 909·2021-09-24 09:47
阅读 2553·2019-08-30 15:54
阅读 1520·2019-08-30 15:44