优化搜索

assets/search.js

@@ -81,17 +81,83 @@
 
     const searchHits = window.bookSearchIndex.search(input.value, 10);
     searchHits.forEach(function (page) {
-      const li = element('<li><a href></a><small></small></li>');
-      const a = li.querySelector('a'), small = li.querySelector('small');
+      const li = element('<li><a href></a><span></span><small></small></li>');
+      const a = li.querySelector('a'), small = li.querySelector('small'),span = li.querySelector('span');
 
       a.href = page.href;
       a.textContent = page.title;
       small.textContent = page.section;
 
+      // 使用 Promise+async 实现
+      async function asyncFn() {
+        let returnData = await getSomething(page.href)
+        return returnData
+      }
+
+      // 因为asyncFn()返回的是 Promise对象，而不是直接返回值，所以需要.then来获取值进行操作
+      asyncFn().then(content => {
+        // 去除html标签
+        content = content.replace(/(<([^>]+)>)/ig, '');
+        // 按换行符分割成数组
+        let contentArray = lengthCutting(content, 15);
+        console.log(contentArray)
+        contentArray.forEach(line => {
+          if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) {
+            console.log(1+line);
+            return;
+          }
+          if (line.search(input.value) != -1 && span.textContent == '') {
+            console.log(2 + line);
+            span.textContent = line;
+            return;
+          }
+        })
+        if (span.textContent == '') {
+          contentArray.forEach(line => {
+            if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) {
+              console.log(3 + line);
+              return;
+            }
+            input.value.split('').forEach(s => {
+              console.log(1111 + s)
+              console.log(2222 +line) 
+              if (line.search(s) != -1 && span.textContent == '') {
+                console.log(4 + line);
+                span.textContent = line;
+                return;
+              }
+            })
+          })
+        }
+        console.log(888+span.textContent)
+      })
+
       results.appendChild(li);
     });
   }
 
+function lengthCutting(str, num) {
+  let strArr = [];
+
+  for (let i = 0; i < str.length; i += num) strArr.push(str.slice(i, i + num));
+
+  return strArr;
+}
+
+// 封装数据请求方法（异步）
+function getSomething(link) {
+  return new Promise(resolve => {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', link, true);
+    xhr.send();
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        resolve(xhr.responseText);
+      }
+    }
+  })
+}
+
   /**
    * @param {String} content
    * @returns {Node}