Very naive highlight of the searched terms

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

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