Bold search terms in results

create_app.py

@@ -1,3 +1,4 @@
+import re
 from logging import getLogger
 from typing import List
 
@@ -17,9 +18,25 @@ def create(tiny_index: TinyIndex):
 
     @app.get("/search")
     def search(s: str):
-        results = get_results(s)
-        logger.info("Return results: %r", results)
-        return results
+        results, terms = get_results(s)
+
+        formatted_results = []
+        for result in results:
+            term_patterns = [rf'\b{term}\b' for term in terms]
+            pattern = '|'.join(term_patterns)
+            title = result.title
+            matches = re.finditer(pattern, title, re.IGNORECASE)
+            all_spans = [0] + sum((list(m.span()) for m in matches), []) + [len(title)]
+            formatted_result = []
+            for i in range(len(all_spans) - 1):
+                is_bold = i % 2 == 1
+                start = all_spans[i]
+                end = all_spans[i + 1]
+                formatted_result.append({'value': title[start:end], 'is_bold': is_bold})
+            formatted_results.append({'title': formatted_result, 'url': result.url})
+
+        logger.info("Return results: %r", formatted_results)
+        return formatted_results
 
     def order_results(query, results: List[Document]):
         ordered_results = sorted(results, key=lambda result: Levenshtein.distance(query, result.title))
@@ -28,7 +45,7 @@ def create(tiny_index: TinyIndex):
 
     @app.get("/complete")
     def complete(q: str):
-        ordered_results = get_results(q)
+        ordered_results, terms = get_results(q)
         results = [item.title.replace("\n", "") + ' — ' +
                    item.url.replace("\n", "") for item in ordered_results]
         if len(results) == 0:
@@ -47,7 +64,7 @@ def create(tiny_index: TinyIndex):
             if items is not None:
                 pages += [item for item in items if term in item.title.lower()]
         ordered_results = order_results(q, pages)
-        return ordered_results
+        return ordered_results, terms
 
     @app.get('/')
     def index():

static/index.css

@@ -29,3 +29,6 @@ a {
     text-decoration: none;
 }
 
+span .term {
+    font-weight: bold;
+}

static/index.js

@@ -34,7 +34,7 @@ function addResult(title, url) {
    const par = document.createElement("p");
 
    const link = document.createElement("a");
-   const linkText = document.createTextNode(title);
+   const linkText = createBoldedSpan(title);
    link.appendChild(linkText);
    link.href = url;
 
@@ -42,4 +42,20 @@ function addResult(title, url) {
 
    const results = document.getElementById('results');
    results.appendChild(par);
+}
+
+function createBoldedSpan(title) {
+    span = document.createElement('span');
+    title.forEach(element => {
+        text = document.createTextNode(element.value);
+        if (element.is_bold) {
+            b = document.createElement('span');
+            b.classList.add('term');
+            b.appendChild(text);
+            span.appendChild(b);
+        } else {
+            span.appendChild(text);
+        }
+    });
+    return span;
 }