资讯专栏INFORMATION COLUMN

Day06 - Fetch、filter、正则表达式实现快速古诗匹配

Carl / 979人阅读

摘要:正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。

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 对象的语法

修饰符ig

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);

获取searchsuggestions"节点分别对changekeyup事件进行监听,当输入框中的内容发生变化或者键盘弹起时触发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 `
 
  • ${ text } ${ title } - ${ detail_author }
  • `; }).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 规则的字符串替换成新字符串

    源码下载

    Github Source Code

    社群品牌:从零到壹全栈部落

    定位:寻找共好,共同学习,持续输出全栈技术社群

    业界荣誉:IT界的逻辑思维

    文化:输出是最好的学习方式

    官方公众号:全栈部落

    社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)

    技术交流社区:全栈部落BBS

    全栈部落完整系列教程:全栈部落完整电子书学习笔记

    关注全栈部落官方公众号,每晚十点接收系列原创技术推送

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/112290.html

    相关文章

    • Day06 - Fetchfilter正则达式实现快速古诗匹配

      摘要:正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

      Warren 评论0 收藏0
    • Day06 - Fetchfilter正则达式实现快速古诗匹配

      摘要:正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

      StonePanda 评论0 收藏0
    • 精读《What's new in javascript》

      摘要:举例来说即便某个失败了,也不会导致的发生,这样在不在乎是否有项目失败,只要拿到都结束的信号的场景很有用。对于则稍有不同只要有子项,就会完成,哪怕第一个了,而第二个了,也会,而对于,这种场景会直接。 1. 引言 本周精读的内容是:Google I/O 19。 2019 年 Google I/O 介绍了一些激动人心的 JS 新特性,这些特性有些已经被主流浏览器实现,并支持 polyfill...

      dabai 评论0 收藏0
    • 正则达式迷你书-笔记

      摘要:使用看完你就会正则表达式了四种操作验证切分提取替换第一章正则表达式字符匹配攻略正则表达式是匹配模式,要么匹配字符,要么匹配位置至少,至多匹配中的任一个字符范围表示法如果要匹配则要么要么要么通配符,表示几乎任意 API 使用 String#search String#split String#match String#replace RegExp#test Reg...

      IamDLY 评论0 收藏0

    发表评论

    0条评论

    Carl

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <