摘要：正則表達(dá)式實(shí)現(xiàn)快速古詩(shī)匹配作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。數(shù)據(jù)匹配操作使用基礎(chǔ)參考文檔項(xiàng)目源碼分析正則找出匹配的詩(shī)句替換高亮的標(biāo)簽構(gòu)造值會(huì)返回帶搜索關(guān)鍵字的新數(shù)組。執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。

作者：?liyuechun  
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫(xiě)東西，不借助框架和庫(kù)，也不使用編譯器和引用?，F(xiàn)在你看到的是這系列指南的第 6 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

在輸入框中搜索字或者某個(gè)詞快速匹配含有這個(gè)字或者是詞的詩(shī)句。

flex布局

nth-child奇偶匹配

linear-gradient顏色漸變

transform

Fetch

Array

filter()

map()

push()

join()

...

JavaScript RegExp 對(duì)象

字面量語(yǔ)法

創(chuàng)建 RegExp 對(duì)象的語(yǔ)法

修飾符i、g

match()

replace()

UI布局

通過(guò)Fetch下載數(shù)據(jù)

數(shù)據(jù)處理并保存

事件監(jiān)聽(tīng)

數(shù)據(jù)匹配操作

新數(shù)據(jù)替換展示

HTML代碼

  

    
    

      
輸入詞句，找一首詩(shī)
      
輸入詞句，找一首詩(shī)
      
輸入詞句，找一首詩(shī)
      
輸入詞句，找一首詩(shī)
      
輸入詞句，找一首詩(shī)
    
  

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



/*偶數(shù)匹配*/
.suggestions li:nth-child(even) {
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
}

/*奇數(shù)匹配*/
.suggestions li:nth-child(odd) {
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top, #ffffff 0%, #efefef 100%);
}

CSS布局相關(guān)參考文檔

CSS參考手冊(cè)

CSS選擇器筆記

flex布局完全入門(mén)教程

使用HTML5里的classList操作CSS類

position

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

具體數(shù)據(jù)請(qǐng)求過(guò)程見(jiàn)下圖：

Fetch詳細(xì)使用文檔

blob.json()是將數(shù)據(jù)轉(zhuǎn)換為json數(shù)據(jù)，data為then函數(shù)中轉(zhuǎn)換完的數(shù)據(jù)，在這個(gè)案例中，data是一個(gè)數(shù)組。

poetrys.push(...data)這句代碼中的push是往數(shù)組里面新增對(duì)象，而...data代表的是將這個(gè)data數(shù)組中的數(shù)據(jù)一一的存儲(chǔ)到poetrys數(shù)組中。

const search = document.querySelector(".search");
const suggestions = document.querySelector(".suggestions");

search.addEventListener("change", displayMatches);
search.addEventListener("keyup", displayMatches);

獲取search和suggestions"節(jié)點(diǎn)分別對(duì)change、keyup事件進(jìn)行監(jiān)聽(tīng)，當(dāng)輸入框中的內(nèi)容發(fā)生變化或者鍵盤(pán)彈起時(shí)觸發(fā)displayMatches函數(shù)更新數(shù)據(jù)。

RegExp使用基礎(chǔ)

RegExp參考文檔

項(xiàng)目源碼分析

function findMatches(wordToMatch, poetrys) {
 return poetrys.filter(poet => {
   // 正則找出匹配的詩(shī)句
   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 => {
   // 替換高亮的標(biāo)簽
   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 }`);
   // 構(gòu)造 HTML 值
   return `
 

   ${ text }
   ${ title } - ${ detail_author }
 
`;
 }).join("");
 //        console.log(html);
 suggestions.innerHTML = html;
}

poetrys.filter會(huì)返回帶搜索關(guān)鍵字的新數(shù)組。

const regex = new RegExp(this.value, "gi"); 代表匹配規(guī)則。

g：執(zhí)行全局匹配（查找所有匹配而非在找到第一個(gè)匹配后停止）。

i：執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。

上面的這種寫(xiě)法等價(jià)于："/this.value/gi"。

matches.map會(huì)返回一個(gè)按照新的規(guī)則處理完以后的新的數(shù)組。

title.replace(regex, "新字符串");表示將title字符串中滿足 regex 規(guī)則的字符串替換成新字符串。

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽(yù)：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號(hào)：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書(shū)學(xué)習(xí)筆記