Keeps the original text node when search highlighting happens so it can later be restored.

chrome/browser/resources/settings/search_settings.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('settings', function() {
   /** @const {string} */
   var WRAPPER_CSS_CLASS = 'search-highlight-wrapper';
 
   /** @const {string} */
+  var ORIGINAL_CONTENT_CSS_CLASS = 'search-highlight-original-content';
+
+  /** @const {string} */
   var HIT_CSS_CLASS = 'search-highlight-hit';
 
   /** @const {string} */
   var SEARCH_BUBBLE_CSS_CLASS = 'search-bubble';
 
   /**
    * A CSS attribute indicating that a node should be ignored during searching.
    * @const {string}
    */
   var SKIP_SEARCH_CSS_ATTRIBUTE = 'no-search';
@@ skipping 18 matching lines @@
     'PAPER-ITEM',
     'PAPER-RIPPLE',
     'PAPER-SLIDER',
     'PAPER-SPINNER',
     'STYLE',
     'TEMPLATE',
   ]);
 
   /**
    * Finds all previous highlighted nodes under |node| (both within self and
-   * children's Shadow DOM) and removes the highlights (yellow rectangle and
-   * search bubbles).
+   * children's Shadow DOM) and replaces the highlights (yellow rectangle and
+   * search bubbles) with the original text node.
    * TODO(dpapad): Consider making this a private method of TopLevelSearchTask.
    * @param {!Node} node
    * @private
    */
   function findAndRemoveHighlights_(node) {
     var wrappers = node.querySelectorAll('* /deep/ .' + WRAPPER_CSS_CLASS);
 
     for (var wrapper of wrappers) {
-      var hitElements = wrapper.querySelectorAll('.' + HIT_CSS_CLASS);
-      // For each hit element, remove the highlighting.
-      for (var hitElement of hitElements) {
-        wrapper.replaceChild(hitElement.firstChild, hitElement);
-      }
-
-      // Normalize so that adjacent text nodes will be combined.
-      wrapper.normalize();
-      // Restore the DOM structure as it was before the search occurred.
-      if (wrapper.previousSibling)
-        wrapper.textContent = ' ' + wrapper.textContent;
-      if (wrapper.nextSibling)
-        wrapper.textContent = wrapper.textContent + ' ';
-
-      wrapper.parentElement.replaceChild(wrapper.firstChild, wrapper);
+      var originalNode = wrapper.querySelector(
+          '.' + ORIGINAL_CONTENT_CSS_CLASS);
+      wrapper.parentElement.replaceChild(originalNode.firstChild, wrapper);
     }
 
     var searchBubbles = node.querySelectorAll(
         '* /deep/ .' + SEARCH_BUBBLE_CSS_CLASS);
     for (var searchBubble of searchBubbles)
       searchBubble.remove();
   }
 
   /**
    * Applies the highlight UI (yellow rectangle) around all matches in |node|.
    * @param {!Node} node The text node to be highlighted. |node| ends up
    *     being removed from the DOM tree.
    * @param {!Array<string>} tokens The string tokens after splitting on the
    *     relevant regExp. Even indices hold text that doesn't need highlighting,
    *     odd indices hold the text to be highlighted. For example:
    *     var r = new RegExp('(foo)', 'i');
    *     'barfoobar foo bar'.split(r) => ['bar', 'foo', 'bar ', 'foo', ' bar']
    * @private
    */
   function highlight_(node, tokens) {
     var wrapper = document.createElement('span');
     wrapper.classList.add(WRAPPER_CSS_CLASS);
     // Use existing node as placeholder to determine where to insert the
     // replacement content.
     node.parentNode.replaceChild(wrapper, node);
 
+    // Keep the existing node around for when the highlights are removed. The
+    // existing text node might be involved in data-binding and therefore should
+    // not be discarded.
+    var span = document.createElement('span');
+    span.classList.add(ORIGINAL_CONTENT_CSS_CLASS);
+    span.style.display = 'none';
+    span.appendChild(node);
+    wrapper.appendChild(span);
+
     for (var i = 0; i < tokens.length; ++i) {
       if (i % 2 == 0) {
         wrapper.appendChild(document.createTextNode(tokens[i]));
       } else {
         var span = document.createElement('span');
         span.classList.add(HIT_CSS_CLASS);
         span.style.backgroundColor = '#ffeb3b'; // --var(--paper-yellow-500)
         span.textContent = tokens[i];
         wrapper.appendChild(span);
       }
@@ skipping 491 matching lines @@
   function setSearchManagerForTesting(searchManager) {
     SearchManagerImpl.instance_ = searchManager;
   }
 
   return {
     getSearchManager: getSearchManager,
     setSearchManagerForTesting: setSearchManagerForTesting,
     SearchRequest: SearchRequest,
   };
 });