Vue js Text-Hervorhebungsfilter

8

Ich brauche Hilfe beim Schreiben eines Text-Highlight-Filters mit vuejs. Die Idee besteht darin, ein gegebenes Array von Wörtern zu durchlaufen, und wenn es eine Übereinstimmung gibt, wenden Sie einen Bereich mit einer Klasse auf dieses Wort an. Das Problem, das ich habe, ist, dass ich nicht scheinen kann, Daten mit HTML-Formatierung mit vuejs zurückzugeben. Alle Ideen werden sehr geschätzt. Ich bin wirklich fest damit.

%Vor%     
Makten 15.06.2016, 15:24
quelle

4 Antworten

8

Wie Jeff gerade gesagt hat, interpretieren die grundlegenden Schnurrbärte die Daten als einfachen Text.

Sie können Ihren Bereich hinzufügen, indem Sie die Abfrage durch die Methode String.replace () ersetzen.

>

Hier ist ein einfaches Beispiel: Ссылка

%Vor%     
Thomas Ferro 15.06.2016 17:19
quelle
4

Sie müssen {{{ foo | highlight }}} mit 3 Klammern verwenden, nicht mit 2 {{}} . Zwei Klammern entkommt HTML.

    
Jeff 15.06.2016 17:04
quelle
3

HTML-Interpolationen {{{foo}}} wurden zugunsten der v-html-Direktive in vuejs2.X entfernt. Daher ermöglicht Vue.js ab Version 2.x die Verwendung von JavaScript-Vorlagen (React-Stil) zusätzlich zu HTML-Templating.
@ Jeffs Antwort ist korrekt, aber für Vuejs 1.x-Versionen, aber für den Fall, {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{}}}}}} Wenn Sie ein <strong></strong> -Tag hinzufügen möchten, müssen Sie v-html, das v-html, verwenden, um Vue zu bitten, die Zeichenfolge als HTML zu bewerten:

%Vor%

Markierungsfilter:

%Vor%

oder Sie können den Filter von @Thomas Ferro verwenden

    
Kumar_14 23.09.2017 10:07
quelle
1

Die Idee ist, split zu verwenden und die Wörter beizubehalten, auf die die Regex passt.

Hier ist eine benutzersichere Komponente, die html ausblendet und eine reguläre Suche hervorhebt, die nach mehreren Wörtern sucht:

%Vor%

Anwendungsbeispiel:

%Vor%

jsfiddle:

Ссылка

    
wolfdawn 18.05.2017 13:30
quelle

Tags und Links