Day06 - Fetch、filter、正则表达式实现快速古诗匹配
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果图
在输入框中搜索字或者某个词
快速匹配含有这个字或者是词的诗句。
涉及特性
flex布局
nth-child
奇偶匹配linear-gradient
颜色渐变transform
Fetch
Array
filter()
map()
push()
join()
...
JavaScript RegExp 对象
- 字面量语法
- 创建 RegExp 对象的语法
- 修饰符
i
、g
match()
replace()
实现步骤
- UI布局
- 通过Fetch下载数据
- 数据处理并保存
- 事件监听
- 数据匹配操作
- 新数据替换展示
布局篇
- HTML代码
1 | <form class="search-form"> |
- CSS代码
1 | html { |
CSS布局相关参考文档
通过Fetch下载数据解析并且保存
1 | const endpoint = 'https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json'; |
blob.json()
是将数据转换为json数据,data为then
函数中转换完的数据,在这个案例中,data是一个数组。
poetrys.push(...data)
这句代码中的push
是往数组里面新增对象,而...data
代表的是将这个data数组中的数据一一的存储到poetrys
数组中。
事件监听
1 | const search = document.querySelector('.search'); |
获取search
和suggestions'
节点分别对change
、keyup
事件进行监听,当输入框中的内容发生变化或者键盘弹起时触发displayMatches
函数更新数据。
数据匹配操作
- RegExp使用基础
- 项目源码分析
1 | function findMatches(wordToMatch, poetrys) { |
poetrys.filter
会返回带搜索关键字的新数组。const regex = new RegExp(this.value, 'gi');
代表匹配规则。g
:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。i
:执行对大小写不敏感的匹配。上面的这种写法等价于:”/this.value/gi”。
matches.map
会返回一个按照新的规则处理完以后的新的数组。title.replace(regex, "新字符串");
表示将title字符串中满足regex
规则的字符串替换成新字符串
。