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规划相干参考文档

  • 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, `<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 划定规矩的字符串替代成新字符串。

源码下载

Github Source Code

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

定位：寻觅共好，配合进修，延续输出全栈手艺社群

业界声誉：IT界的逻辑思维

文明：输出是最好的进修体式格局

官方民众号：全栈部落

社群发起人：春哥(从零到壹创始人，交换微信：liyc1215)

手艺交换社区：全栈部落BBS

全栈部落完整系列教程：全栈部落完整电子书进修笔记

关注全栈部落官方民众号，每晚十点吸收系列原创手艺推送