JSFiddle - React, Tailwind, and code Playground

by cuhuak

HTML

<script src="https://rawgit.com/yyx990803/vue/dev/dist/vue.js"></script>
<div id="app">
    <c-test></c-test>
</div>

<script id="template" type="text"> 
    <textarea v-model="text"></textarea>
    <br>
    <input v-model="search">
    <br><br>
    {{{text | highlited search}}}
</script>

CSS

.highlighted-text {
    background: yellow;
}

JavaScript

Vue.component('c-test', {
    template: '#template',
    
    data: function () {
        return {
            text: 'latestla',
            search: 'test'
        };
    },
});


Vue.filter('highlited', function highlighted(value, key) {
  var s = escapeHtml(key.toLowerCase()); // lowered search string
  var v = value.toLowerCase(); // lowered value to be highlighted
  var p; // position
  var i = 0; // index search from

  if (s) {
    while ((p = v.indexOf(s, i)) > -1) {
      value = (value.slice(0, p + s.length) + '</span>' + value.slice(p + s.length));
      value = (value.slice(0, p) + '<span class="highlighted-text">' + value.slice(p));
      i = p + 38; // 38 == '<span class="highlighted-text"></span>'.length
      v = value.toLowerCase();
    }

  }

  return value;
});

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




//-------------------

function escapeHtml(value) {
  var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  return String(value).replace(/[&<>"'\/]/g, function (s) {
    return entityMap[s];
  });
};