如何突出html標籤內的字不突出標籤VUE

我有V-HTML標籤呈現一個HTML文本並顯示，就像這樣：如何突出html標籤內的字不突出標籤VUE

<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標記。請幫忙。謝謝。

來源

2017-10-18 ali sedighian

的可能的複製（[只突出一個字符串（JQuery的/ JavaScript）的範圍內匹配的文本] https://stackoverflow.com /問題/ 43328094 /高亮僅匹配文本中之串-jquery的JavaScript的）** **或[Vue的JS文本高亮顯示過濾器（https://stackoverflow.com/questions/37839608/vue- js-text-highlight-filter） – ctwheels

它不是重複的... –

我的html文字是這樣的：

hjbsdhbdhbvjvgfbhjduhsbcbvsdjbh

fuhsb

cdbh

vfshb

vfdvd

和無標籤的具有特定的類或ID ... 他們是未知 –

如果您不反對外部依賴關係，則可以使用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() { 
 
     \t // 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, 
 
     }); 
 
    \t }, 
 
     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>

來源

2017-10-19 17:12:10 asemahle

如何突出html標籤內的字不突出標籤VUE

回答

相關問題