Merge pull request #7425 from wenzhixin/fix/7194

Fixed search highlight not working bug

src/bootstrap-table.js

@@ -1659,8 +1659,12 @@ class BootstrapTable {
           this.options.undefinedText : value
       }
 
-      if (column.searchable && this.searchText && this.options.searchHighlight && !(column.checkbox || column.radio)) {
-        let defValue = ''
+      if (
+        column.searchable &&
+        this.searchText &&
+        this.options.searchHighlight &&
+        !(column.checkbox || column.radio)
+      ) {
         let searchText = this.searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 
         if (this.options.searchAccentNeutralise) {
@@ -1672,22 +1676,10 @@ class BootstrapTable {
           }
         }
 
-        const regExp = new RegExp(`(${searchText})`, 'gim')
-        const marker = '<mark>$1</mark>'
-        const isHTML = value && /<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(value)
-
-        if (isHTML) {
-          // value can contains a HTML tags
-          let textContent = new DOMParser().parseFromString(value.toString(), 'text/html').documentElement.textContent
-          const textReplaced = textContent.replace(regExp, marker)
+        const defValue = Utils.replaceSearchMark(value, searchText)
 
-          textContent = textContent.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-          defValue = value.replace(new RegExp(`(>\\s*)(${textContent})(\\s*)`, 'gm'), `$1${textReplaced}$3`)
-        } else {
-          // but usually not
-          defValue = value.toString().replace(regExp, marker)
-        }
-        value = Utils.calculateObjectValue(column, column.searchHighlightFormatter, [value, this.searchText], defValue)
+        value = Utils.calculateObjectValue(column, column.searchHighlightFormatter,
+          [value, this.searchText], defValue)
       }
 
       if (item[`_${field}_data`] && !Utils.isEmptyObject(item[`_${field}_data`])) {

src/utils/index.js

@@ -665,5 +665,27 @@ export default {
 
       if (callNow) func.apply(context, args)
     }
+  },
+
+  replaceSearchMark (html, searchText) {
+    const node = document.createElement('div')
+    const replaceMark = (node, searchText) => {
+      const regExp = new RegExp(searchText, 'gim')
+
+      for (const child of node.childNodes) {
+        if (child.nodeType === document.TEXT_NODE) {
+          child.data = child.data.replace(regExp, match => `___${match}___`)
+        }
+        if (child.nodeType === document.ELEMENT_NODE) {
+          replaceMark(child, searchText)
+        }
+      }
+    }
+
+    node.innerHTML = html
+    replaceMark(node, searchText)
+
+    return node.innerHTML.replace(new RegExp(`___${searchText}___`, 'gim'),
+      match => `<mark>${match.slice(3, -3)}</mark>`)
   }
 }