fix: HTML-escape snippet/title before Lucene highlight conversion

Raw '<' in paragraph source (e.g. WHERE id < 100) was being parsed as a
broken DOM tag by the browser when rendered via [innerHTML]/ng-bind-html,
silently dropping the text that followed.

Fix: escape &, <, > to HTML entities first, then promote &lt;B&gt; markers
to <mark> elements. Applied to both Angular (result-item.component.ts) and
Classic UI (result-list.controller.js).

Addresses voidmatcha review comment (May 24).

Author: Kalyan Kanuri

zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.ts

@@ -65,13 +65,14 @@ export class NotebookSearchResultItemComponent implements OnChanges {
     this.displayName = this.result.name ? this.result.name : `Note ${noteId}`;
 
     const snippet = this.result.snippet || '';
-    // Preserve Lucene <B> highlighting by converting to <mark>
-    this.codeHtml = snippet.replace(/<B>/gi, '<mark>').replace(/<\/B>/gi, '</mark>');
+    // HTML-escape first so raw '<' in code (e.g. WHERE id < 100) is not parsed
+    // as a DOM tag, then promote only the Lucene <B> markers to <mark>.
+    this.codeHtml = this.highlightToMark(snippet);
     this.codeText = snippet.replace(/<\/?B>/gi, '');
     this.interpreter = this.detectInterpreter(this.codeText);
 
     const title = this.result.title || '';
-    this.titleHtml = title.replace(/<B>/gi, '<mark>').replace(/<\/B>/gi, '</mark>');
+    this.titleHtml = this.highlightToMark(title);
 
     const tables = this.result.tables || '';
     this.tablesText = tables
@@ -82,6 +83,17 @@ export class NotebookSearchResultItemComponent implements OnChanges {
     this.outputText = this.result.output || '';
   }
 
+  private highlightToMark(text: string): string {
+    // Escape HTML so raw '<' in source (e.g. WHERE id < 100) is not parsed as
+    // a DOM tag, then convert the Lucene <B>/<\/B> markers back to <mark>.
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/&lt;B&gt;/gi, '<mark>')
+      .replace(/&lt;\/B&gt;/gi, '</mark>');
+  }
+
   private detectInterpreter(text: string): string {
     if (!text) {
       return '';

zeppelin-web/src/app/search/result-list.controller.js

@@ -52,6 +52,17 @@ function SearchResultCtrl($scope, $routeParams, searchService) {
     return '';
   }
 
+  // HTML-escape raw text so '<' in source (e.g. WHERE id < 100) is not parsed
+  // as a DOM tag, then promote only the Lucene <B>/<\/B> markers to <mark>.
+  function highlightToMark(text) {
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/&lt;B&gt;/gi, '<mark>')
+      .replace(/&lt;\/B&gt;/gi, '</mark>');
+  }
+
   results.$promise.then(function(result) {
     $scope.notes = result.body.map(function(note) {
       if (!/\/paragraph\//.test(note.id)) {
@@ -60,17 +71,15 @@ function SearchResultCtrl($scope, $routeParams, searchService) {
       note.id = note.id.replace('paragraph/', '?paragraph=') +
         '&term=' + $routeParams.searchTerm;
 
-      // Preserve Lucene <B> highlighting by converting to <mark>
-      let codeHtml = (note.snippet || '').replace(/<B>/gi, '<mark>').replace(/<\/B>/gi, '</mark>');
       let code = (note.snippet || '').replace(/<B>/g, '').replace(/<\/B>/g, '');
 
       let tables = (note.tables || '').trim().split(/\s+/).filter(function(t) {
         return t;
       }).join(', ');
 
       note.codeText = code;
-      note.codeHtml = codeHtml;
-      note.titleHtml = (note.title || '').replace(/<B>/gi, '<mark>').replace(/<\/B>/gi, '</mark>');
+      note.codeHtml = highlightToMark(note.snippet || '');
+      note.titleHtml = highlightToMark(note.title || '');
       note.outputText = note.output || '';
       note.tablesText = tables;
       note.langBadge = detectLang(code);