allow fuzzy completion of HTML-decorated content and implement this for history and bookmarks

1 files changed, 44 insertions, 9 deletions

diff --git a/lib/completion.js b/lib/completion.js
index c7ac0417..2b29258f 100644
--- a/lib/completion.js
+++ b/lib/completion.js
@@ -109,6 +109,25 @@ var completion = (function() {
     return self;
   })();
 
+  /** Strips HTML tags using a naive regex replacement. Optinally, saves the stripped HTML tags in a
+   * dictionary indexed by the position where the tag should be reinserted. */
+  function stripHtmlTags(str, positions) {
+    var result = str.replace(/<[^>]*>/g, '');
+    if (!positions)
+      return result;
+
+    // we need to get information about where the tags can be reinserted after some string processing
+    var start;
+    var end = -1;
+    var stripped = 0;
+    while (0 <= (start = str.indexOf('<', end + 1))) {
+      end = str.indexOf('>', start);
+      positions[start - stripped] = str.slice(start, end + 1);
+      stripped += end - start + 1;
+    }
+    return result;
+  }
+
   /** Creates an action that opens :url in the current tab by default or in a new tab as an alternative. */
   function createActionOpenUrl(url) {
     return [
@@ -121,14 +140,30 @@ var completion = (function() {
   function createHighlightingCompletion(query, str, action, relevancy) {
     return {
       render: function() {
+        var htmlTags = {};
+        str = stripHtmlTags(str, htmlTags);
         var match = fuzzyMatcher.getMatcher(query).exec(str);
+        if (!match)
+          console.log(query, str);
         var html = '';
-        for (var i = 1; i < match.length; ++i) {
-          if (i % 2 == 1)
-            html += match[i];
+        var i = 0;
+
+        function addToHtml(str) {
+          if (i in htmlTags)
+            html += htmlTags[i];
+          html += str;
+          ++i;
+        }
+
+        for (var m = 1; m < match.length; ++m) {
+          if (m % 2 == 1)
+            for (var j = 0; j < match[m].length; ++j)
+              addToHtml(match[m][j]);
           else
-            html += '<strong>' + match[i] + '</strong>';
+            addToHtml('<span class="fuzzyMatch">' + match[m] + '</span>');
         };
+        addToHtml('');
+
         return html;
       },
       action: action,
@@ -164,7 +199,7 @@ var completion = (function() {
       var handler = function(results) {
         var filtered = [];
         fuzzyMatcher.filter(query,
-                            results, function(comp) { return comp.str },
+                            results, function(comp) { return stripHtmlTags(comp.str) },
                             self.id,
                             function(match) {
           filtered.push(createHighlightingCompletion(
@@ -269,10 +304,10 @@ var completion = (function() {
         var title = '';
 
         if (historyItem.title.length > 0)
-          title = ' (' + historyItem.title + ')';
+          title = ' <span class="title">' + historyItem.title + '</span>';
 
         results.push({
-          str: 'history: ' + historyItem.url + title,
+          str: '<em>history</em> ' + historyItem.url + title,
           url: historyItem.url,
         });
       }
@@ -300,10 +335,10 @@ var completion = (function() {
 
         var title = '';
         if (bookmark.title.length > 0)
-          title = ' (' + bookmark.title + ')';
+          title = ' <span class="title">' + bookmark.title + '</span>';
 
         results.push({
-          str: 'bookmark: ' + bookmark.url + title,
+          str: '<em>bookmark</em> ' + bookmark.url + title,
           url: bookmark.url,
         });
       }