如何突出显示html标签内的单词而不突出显示vue中的标签

debugcn 发表于 Dev

阿里塞迪吉安

我有一个带有 v-html 的标签，它呈现一个 html 文本并显示它，如下所示：

<div v-html="htmlText"></div>

我写了这段代码来突出显示文本，它适用于普通文本：

Vue.filter('highlight', function (word, query) {
  if (query !== '') {
    let check = new RegExp(query, "ig");
    return word.toString().replace(check, function (matchedText, a, b) {
      return ('<strong class="mark">' + matchedText + '</strong>');
    });
  } else {
    return word;
}

<div v-html="$options.filters.highlight(htmlText, myWord)">
</div>

我想突出显示此文本中的一个单词而不突出显示 html 标签。请帮忙。谢谢。

他们好美

如果你不反对外部依赖，你可以使用mark.js。

它允许使用 RegExp 突出显示文本，并且可以跨 HTML 标签工作。这是一个如何与 Vue 一起使用的示例：

var demo = new Vue({
  el: '#demo',
  data: {
    // The html to highlight
    html: '<div>Hello <span>this </span>is <span>some </span>text</div>',
    
    // The html with highlighting
    highlightedHtml: '',
    
    // The search term to highlight
    search: 'Hello'
  },
  watch: {
    // When the search term changes: recalculate the highlighted html
    'search': {
      handler: function() {
      	// We create an element with the html to mark. Give it a unique id 
        // so it can be removed later
        let id =  'id' + (new Date()).getTime();
        $('body').append(`<div id="${id}" style="hidden">${this.html}</div>`);
        
        // Create a Mark instance on the new element
        let markInstance = new Mark('#' + id);
        
        // Mark the text with the search string. When the operation is complete,
        // update the hightlighted text and remove the temporary element
        markInstance.markRegExp(new RegExp(this.search, 'gmi'), {
          done: () => {
            this.highlightedHtml = $('#' + id)[0].innerHTML;
            $('#' + id).remove();
          },
          acrossElements: true,
        });
    	},
      immediate: true
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.0/mark.js"></script>

<div id="demo">
  <div>/ <input type="text" v-model="search"> /gmi</div>
  <div v-html="highlightedHtml"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。