浏览代码

Very naive highlight of the searched terms

master
David Larlet 2 年前
父节点
当前提交
1ce597ba8a
共有 2 个文件被更改,包括 58 次插入6 次删除
  1. 29
    3
      david/recherche/index.html
  2. 29
    3
      david/templates/recherche.html

+ 29
- 3
david/recherche/index.html 查看文件

@@ -2543,7 +2543,7 @@
})

// Display the results
showResults(results)
showResults(results, regMap)

// Update the URL
updateURL(query)
@@ -2554,7 +2554,7 @@
* Show the search results in the UI
* @param {Array} results The results to display
*/
function showResults (results) {
function showResults (results, regMap) {
if (results.length) {
const plural = results.length > 1 ? 's' : ''
searchStatus.innerHTML = `<p>${results.length} publication${plural} trouvée${plural} 🙌</p>`
@@ -2564,7 +2564,7 @@
<a href="${result.article.url}">${result.article.title}</a>
(${result.article.date})
</h2>
<p>${result.article.content.slice(0, 280)}…</p>
<p>${highlightContent(result.article.content, regMap)}</p>
`
}).join('')
} else {
@@ -2573,6 +2573,32 @@
}
}

function highlightContent(content, regMap) {
// TODO: deal with close matches when multiple words are looked for,
// it does not look trivial because you have to memorize positions
// then create extracts.
// For instance: `microsoft github`
const extractBoundariesSize = 100
const contentLength = content.length
let extracts = []
for (let reg of regMap) {
const index = content.search(reg)
if (index === -1) { continue }
let extract = content.substring(
index - extractBoundariesSize,
index + reg.source.length + extractBoundariesSize
)
// TODISCUSS: we replace with the source but in case there is
// an uppercase letter it will disappear from the extract
// (is that confusing or closer to what is expected?)
extract = extract.replace(reg,`<mark>${reg.source}</mark>`)
const prefixEllipsis = index - extractBoundariesSize >= 0 ? '…' : ''
const suffixEllipsis = index - extractBoundariesSize <= contentLength ? '…' : ''
extracts.push(`${prefixEllipsis}${extract}${suffixEllipsis}`)
}
return extracts.join('')
}

/**
* Update the URL with a query string for the search string
* @param {String} query The search query

+ 29
- 3
david/templates/recherche.html 查看文件

@@ -236,7 +236,7 @@
})

// Display the results
showResults(results)
showResults(results, regMap)

// Update the URL
updateURL(query)
@@ -247,7 +247,7 @@
* Show the search results in the UI
* @param {Array} results The results to display
*/
function showResults (results) {
function showResults (results, regMap) {
if (results.length) {
const plural = results.length > 1 ? 's' : ''
searchStatus.innerHTML = `<p>${results.length} publication${plural} trouvée${plural} 🙌</p>`
@@ -257,7 +257,7 @@
<a href="${result.article.url}">${result.article.title}</a>
(${result.article.date})
</h2>
<p>${result.article.content.slice(0, 280)}…</p>
<p>${highlightContent(result.article.content, regMap)}</p>
`
}).join('')
} else {
@@ -266,6 +266,32 @@
}
}

function highlightContent(content, regMap) {
// TODO: deal with close matches when multiple words are looked for,
// it does not look trivial because you have to memorize positions
// then create extracts.
// For instance: `microsoft github`
const extractBoundariesSize = 100
const contentLength = content.length
let extracts = []
for (let reg of regMap) {
const index = content.search(reg)
if (index === -1) { continue }
let extract = content.substring(
index - extractBoundariesSize,
index + reg.source.length + extractBoundariesSize
)
// TODISCUSS: we replace with the source but in case there is
// an uppercase letter it will disappear from the extract
// (is that confusing or closer to what is expected?)
extract = extract.replace(reg,`<mark>${reg.source}</mark>`)
const prefixEllipsis = index - extractBoundariesSize >= 0 ? '…' : ''
const suffixEllipsis = index - extractBoundariesSize <= contentLength ? '…' : ''
extracts.push(`${prefixEllipsis}${extract}${suffixEllipsis}`)
}
return extracts.join('')
}

/**
* Update the URL with a query string for the search string
* @param {String} query The search query

正在加载...
取消
保存