Day06 - Fetch、filter、正则表达式实现快速古诗匹配
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代码
<form class="search-form">
<input type="text" class="search" placeholder="诗人名字,关键字">
<ul class="suggestions">
<li>输入词句,找一首诗</li>
<li>输入词句,找一首诗</li>
<li>输入词句,找一首诗</li>
<li>输入词句,找一首诗</li>
<li>输入词句,找一首诗</li>
</ul>
</form>
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布局相关参考文档
通过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);
});
具体数据请求过程见下图:
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使用基础
项目源码分析
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, `<span class="hl">${ this.value }</span>`);
const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`);
const detail_author = poet.detail_author[0].replace(regex, `<span class="hl">${ this.value }</span>`);
// 构造 HTML 值
return `
<li>
<span class="poet">${ text }</span>
<span class="title">${ title } - ${ detail_author }</span>
</li>
`;
}).join('');
// console.log(html);
suggestions.innerHTML = html;
}
poetrys.filter
会返回带搜索关键字的新数组。const regex = new RegExp(this.value, 'gi');
代表匹配规则。g
:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。i
:执行对大小写不敏感的匹配。上面的这种写法等价于:"/this.value/gi"。
matches.map
会返回一个按照新的规则处理完以后的新的数组。title.replace(regex, "新字符串");
表示将title字符串中满足regex
规则的字符串替换成新字符串
。
源码下载
社群品牌:从零到壹全栈部落
定位:寻找共好,共同学习,持续输出全栈技术社群
业界荣誉:IT界的逻辑思维
文化:输出是最好的学习方式
官方公众号:全栈部落
社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)
技术交流社区:全栈部落BBS
全栈部落完整系列教程:全栈部落完整电子书学习笔记
关注全栈部落官方公众号,每晚十点接收系列原创技术推送 |
---|
Day06 - Fetch、filter、正则表达式实现快速古诗匹配的更多相关文章
- [.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门
[.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门 1. 什么是正则表达式? 1.1 正则表达式概念 正则表达式,又称正则表示法,英文名:Regular Expression(简 ...
- PHP正则表达式的快速学习方法
1.入门简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...
- 常用的正则表达式(例如:匹配中文、匹配html)(转载)
匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串 ...
- (转)PHP正则表达式的快速学习方法
1.入门简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...
- 一个关于Python正则表达式的快速使用手册
一直在纠结自己的博客到底应该写一些什么东西,这几天发现自己的正则用的不是很熟练,于是想要写一篇关于正则表达式的博客,目的就是为了让自己以后要用而又不会的时候不至于像无头苍蝇一样到处乱撞. 有些人在碰到 ...
- Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索"
Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索" //匹配右边 var reg: TPerlRegEx; begin ...
- Delphi 正则表达式语法(6): 贪婪匹配与非贪婪匹配
Delphi 正则表达式语法(6): 贪婪匹配与非贪婪匹配 //贪婪匹配 var reg: TPerlRegEx; begin reg := TPerlRegEx.Create(nil); ...
- Python中正则表达式对中文的匹配问题
python匹配中文的时候特别要注意的是匹配的正则字符串是否是Unicode格式的: import re source = "s2f程序员杂志一2d3程序员杂志二2d3程序员杂志三2d3程序 ...
- PHP正则表达式之快速学习法
1.入门简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...
随机推荐
- 利用离散 Fourier 变换解一元二次方程
设二次方程$$x^2+bx+c=0$$的两个根分别为 $x_1,x_2$.则$$(x-x_1)(x-x_2)=x^2+bx+c.$$因此$$\begin{cases} x_1+x_2=-b\\x_1 ...
- android选择器汇总、仿最美应用、通用课程表、卡片动画、智能厨房、阅读客户端等源码
Android精选源码 android各种 选择器 汇总源码 高仿最美应用项目源码 android通用型课程表效果源码 android实现关键字变色 Android ViewPager卡片视差.拖拽及 ...
- 专利|Pct||
专利:有些专利写的尽量模糊,为了不让别人检出,让别人能轻易侵犯专利权 优先权:在本国申请后,在他国也是同一个专利人申请,并也是同一个申请日. 发明20年:实用新型外观设计:20年 Pct:专利合作条约 ...
- HTTP-web服务器接收到client请求后的处理过程(很详细)
1. 客户发起情况到服务器网卡: 2. 服务器网卡接受到请求后转交给内核处理: 3. 内核根据请求对应的套接字,将请求交给工作在用户空间的Web服务器进程 4. Web服务器进程根据用户请求,向内核进 ...
- [LC] 45. Jump Game II
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- Qt 延时处理的几种办法
有些时候,我们需要程序延时一会儿: 这里提供四种方法: 1.多线程程序使用QThread::sleep()或者QThread::msleep()或QThread::usleep()或QThread:: ...
- timber|stain|compensate|
N-UNCOUNT 木材;原木;树木:林木Timber is wood that is used for building houses and making furniture. You can a ...
- tomcat启动不了的问题
tomcat启动的几个问题 1.端口冲突 2.非端口冲突,需要加入配置host文件 日志文件: 解决办法:https://blog.csdn.net/u012949658/article/detail ...
- 搭建harbor企业级私有registry
主机环境要求 硬件Hardware Resource Capacity Description CPU minimal 2 CPU 4 CPU is prefered Mem minimal 4GB ...
- Java IO: RandomAccessFile
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) RandomAccessFile允许你来回读写文件,也可以替换文件中的某些部分.FileIn ...