Fix: no highlighting of matched keywords in search results

readthedocs/core/static-src/core/js/doc-embed/search.js

@@ -54,7 +54,7 @@ function attach_elastic_search_query(data) {
 
                         var item = $('<a>', {'href': link});
                         item.html(title);
-                        item.find('em').addClass('highlighted');
+                        item.find('span').addClass('highlighted');
                         list_item.append(item);
 
                         // If the document is from subproject, add extra information
@@ -99,9 +99,9 @@ function attach_elastic_search_query(data) {
                                         '<%= domain_subtitle %>' +
                                     '</a>' +
                                 '</div>' +
-                                '<span>' +
+                                '<div>' +
                                     '<%= domain_content %>' +
-                                '</span>';
+                                '</div>';
 
                             // if the result is page section
                             if(inner_hits[j].type === "sections") {
@@ -179,7 +179,7 @@ function attach_elastic_search_query(data) {
                                 );
                             }
 
-                            contents.find('em').addClass('highlighted');
+                            contents.find('span').addClass('highlighted');
                             list_item.append(contents);
 
                             // Create some spacing between the results.

readthedocs/search/faceted_search.py

@@ -108,6 +108,12 @@ class PageSearchBase(RTDFacetedSearch):
         'domains.name^2',
         'domains.display_name',
     ]
+    _common_highlight_options = {
+        'encoder': 'html',
+        'number_of_fragments': 1,
+        'pre_tags': ['<span>'],
+        'post_tags': ['</span>'],
+    }
     fields = _outer_fields
 
     # need to search for both 'and' and 'or' operations
@@ -126,7 +132,7 @@ def count(self):
 
     def query(self, search, query):
         """Manipulates query to support nested query."""
-        search = search.highlight_options(encoder='html', number_of_fragments=1)
+        search = search.highlight_options(**self._common_highlight_options)
 
         # match query for the title (of the page) field.
         match_title_query = Match(title=query)
@@ -137,14 +143,13 @@ def query(self, search, query):
             path='sections',
             fields=self._section_fields,
             inner_hits={
-                'highlight': {
-                    'encoder': 'html',
-                    'number_of_fragments': 1,
-                    'fields': {
+                'highlight': dict(
+                    self._common_highlight_options,
+                    fields={
                         'sections.title': {},
                         'sections.content': {},
                     }
-                }
+                )
             }
         )
 
@@ -154,15 +159,14 @@ def query(self, search, query):
             path='domains',
             fields=self._domain_fields,
             inner_hits={
-                'highlight': {
-                    'encoder': 'html',
-                    'number_of_fragments': 1,
-                    'fields': {
+                'highlight': dict(
+                    self._common_highlight_options,
+                    fields={
                         'domains.type_display': {},
                         'domains.name': {},
                         'domains.display_name': {},
                     }
-                }
+                )
             }
         )
 

readthedocs/search/tests/test_api.py

@@ -102,7 +102,7 @@ def test_search_works_with_sections_and_domains_query(
 
         # checking highlighting of results
         highlighted_words = re.findall(  # this gets all words inside <em> tag
-            '<em>(.*?)</em>',
+            '<span>(.*?)</span>',
             highlight[0]
         )
         assert len(highlighted_words) > 0

readthedocs/search/tests/test_views.py

@@ -120,7 +120,7 @@ def _get_highlight(self, result, data_type):
 
     def _get_highlighted_words(self, string):
         highlighted_words = re.findall(
-            '<em>(.*?)</em>',
+            '<span>(.*?)</span>',
             string
         )
         return highlighted_words
@@ -238,6 +238,7 @@ def test_file_search_case_insensitive(self, client, project, case, data_type):
         highlight = self._get_highlight(first_result, data_type)
         assert len(highlight) == 1
         highlighted_words = self._get_highlighted_words(highlight[0])
+        assert len(highlighted_words) >= 1
         for word in highlighted_words:
             assert word.lower() in query.lower()
 
@@ -271,6 +272,7 @@ def test_file_search_exact_match(self, client, project):
         highlight = self._get_highlight(results[0], 'sections.content')
         assert len(highlight) == 1
         highlighted_words = self._get_highlighted_words(highlight[0])
+        assert len(highlighted_words) >= 1
         for word in highlighted_words:
             assert word.lower() in query.lower()
 

readthedocs/search/tests/test_xss.py

@@ -12,7 +12,7 @@ def test_facted_page_xss(self, client, project):
         page_search = PageDocument.faceted_search(query=query, user='')
         results = page_search.execute()
         expected = """
-        &lt;h3&gt;<em>XSS</em> exploit&lt;&#x2F;h3&gt;
+        &lt;h3&gt;<span>XSS</span> exploit&lt;&#x2F;h3&gt;
         """.strip()
 
         hits = results.hits.hits