comment mettre en évidence un mot dans les balises HTML sans mettre en évidence les balises dans vue

Question

j'ai une étiquette avec v-html qui rend un texte html et montre, comme ceci:

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

i écrire ce code pour mettre en évidence le texte et il fonctionne sur le texte normal:

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>

Je veux mettre en évidence un mot dans ce texte sans mettre en évidence les balises html. aidez s'il vous plaît. merci.

Answer 1

Si vous n'êtes pas opposé aux dépendances externes, vous pouvez utiliser mark.js.

Il permet de surligner du texte à l'aide d'un RegExp, et peut fonctionner à travers les balises HTML. Voici un exemple de la façon dont il peut être utilisé avec 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>