JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.js"></script>

<div id="app">
  <input v-model="search">
  <div v-html="contentToShow" class="content"></div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    search: ', world!!fuck',
    content: [
      'hello, <i>world</i>!!',
      '<b>fuck</b> the world',
      'fuck <u>everything</u>',
      '+<code>[69]</code>.',
      '?(<sup>187</sup>).',
      '|{<span style="color: red">6</span><span style="color: green">6</span><span style="color: blue">6</span>}.',
    ].map(n => `<div>${n}</div>`).join(''),
    contentToShow: '',
  }),
  watch: {
    search: {
      immediate: true,
      handler(val) {
        if (!val) {
          this.contentToShow = this.content;
          return;
        }

        const el = document.createElement('div');
        el.innerHTML = this.content;

        new Mark(el).markRegExp(RegExp(val.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&'), 'gmi'), {
          done: () => this.contentToShow = el.innerHTML,
          acrossElements: true,
        });
      },
    },
  },
});