gitbot/hugo-book
1
0
Fork 1
mirror of https://github.com/alex-shpak/hugo-book.git synced 2024-11-25 12:46:44 +00:00
Code Issues Projects Releases Wiki Activity

优化搜索，里面的摘要实现，添加视觉颜色

Browse Source
This commit is contained in:
dingtalk_dxneyp 2024-01-30 21:31:20 +08:00
parent 2d229c98a7
commit 0f12973881
1 changed files with 32 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
assets/search.js
View File

@ -81,83 +81,58 @@
const searchHits = window.bookSearchIndex.search(input.value, 10);
searchHits.forEach(function (page) {
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');
const li = element('<li><a href></a><small contenteditable="false" ></small></li>');
const a = li.querySelector('a'), small = li.querySelector('small');
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 == '') {
fetch(page.href)
.then((response) => response.text())
.then((content) => {
// Initialize the DOM parser
var parser = new DOMParser();
// Parse the text
var doc = parser.parseFromString(content, "text/html");
// You can now even select part of that html as you would in the regular DOM
// Example:
// var docArticle = doc.querySelector('article').innerHTML;
content = doc.querySelector('#content').querySelector('article').textContent
let contentArray = lengthSplit(content, 20);
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;
if (line.search(input.value) != -1 && small.innerHTML == '') {
small.innerHTML = line.replaceAll(input.value, String.raw`<strong style="color:red" >${input.value}</strong>`);
return;
}
})
if (small.innerHTML == '') {
contentArray.forEach(line => {
if (line.match(/^\s+$/) || line.match(/^[ ]+$/) || line.match(/^[ ]*$/) || line.match(/^\s*$/)) {
return;
}
input.value.split('').forEach(s => {
if (line.search(s) != -1 && small.innerHTML == '') {
small.innerHTML = line.replaceAll(s, String.raw`<strong style="color:red" >${s}</strong>`);
return;
}
})
})
})
}
console.log(888+span.textContent)
})
}
});
results.appendChild(li);
});
}
function lengthCutting(str, num) {
function lengthSplit(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}