javascript - descargar - tutorial vue js

Vue js texto resaltar filtro

Question

Necesito ayuda para escribir un filtro de resaltado de texto usando vuejs. La idea es recorrer una matriz dada de palabras y, si hay una coincidencia, aplicar un lapso con una clase a esa palabra. El problema que tengo es que parece que no puedo devolver datos con formato html con vuejs. Cualquier idea será muy apreciada. Estoy realmente atrapado con esto.

Vue.filter(''highlight'', function(words, query){
    //loop through **words** and if there is a match in **query**
   //apply a <span> with some style
   //At the end return formatted string to html page
})

Answer 1

Como Jeff acaba de decir, los bigotes básicos interpretan los datos como texto sin formato.

Puede agregar su tramo reemplazando la consulta con el método String.replace () .

Aquí hay un ejemplo básico: https://jsfiddle.net/0jew7LLz/

Vue.filter(''highlight'', function(words, query){
    return words.replace(query, ''<span class=/'highlight/'>'' + query + ''</span>'')
});

Answer 2

Necesita usar {{{ foo | highlight }}} {{{ foo | highlight }}} con 3 llaves, no con 2 {{}} . Dos llaves se escapan de HTML.

Answer 3

La idea es usar split y guardar las palabras que correspondan a la expresión regular.

Aquí hay un componente seguro para el usuario que escapa html y resalta una expresión regular que busca varias palabras:

Vue.component(''child'', {
  props: [''msg'', ''search'', ''effect''],
  template: ''<span><span v-for="(s, i) in parsedMsg" v-bind:class="getClass(i%2)">{{s}}</span></span>'',
  methods: {
    getClass: function(i) {
      var myClass = {};
      myClass[this.effect] = !!i;
      return myClass;
    },
  },
  computed: {
    parsedSearch : function () {
        return ''('' + this.search.trim().replace(/ +/g, ''|'') + '')'';
    },
    parsedMsg: function() {
        return this.msg.split(
        new RegExp(this.parsedSearch , ''gi''));
    }
  }
})

new Vue({
  el: ''#app'',
  }
  // ...
})

Ejemplo de uso:

<div id="app">
  <child msg="My life so good and awesome, is''nt it great?" search="   life   is   good  " effect=''highlight''> </child>
</div>

jsfiddle:

https://jsfiddle.net/50xvqatm/

Answer 4

Las interpolaciones de HTML {{{foo}}} han sido eliminadas a favor de la directiva v-html en vuejs2.X , por lo que desde la versión 2.x, Vue.js permite plantillas de JavaScript sin procesar (estilo React) además de plantillas HTML .
La respuesta de @Jeff es correcta, pero para las versiones vuejs 1.x, pero en el caso de que {{{}}} no funcionó para ustedes o si quieren evaluar las etiquetas en el HTML, y de una fuente confiable, ejemplo, si Si desea agregar una etiqueta <strong></strong> , debe usar v-html, el v-html para solicitar a Vue que evalúe la cadena como HTML:

<span v-html="$options.filters.highlight(item, val)">{{ item }}</span>

resaltar filtro:

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

o puedes usar el filtro de @Thomas Ferro