JSFiddle - React, Tailwind, and code Playground

by euledge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<div id="app">
  <p>
    {{text}}
  </p>

  <p v-html="text">
  </p>

  <p v-html="changeTextColor(text)">
  </p>
</div>

JavaScript

var entityMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};
new Vue({
  el: '#app',
  data: {
    text: 'ここが赤くなります。<a href="http://example.com">悪意あるリンク</a>'
  },
  methods: {
    changeTextColor(str) {
      var dirtyStr = this.escapeHtml(str);
      return dirtyStr.replace(/ここ/i, '<font color="red">ここ</font>');
    },
    escapeHtml(dirtyStr) {
      return dirtyStr.replace(/[&<>"'`=\/]/g, function(s) {
        return entityMap[s];
      });
    }
  }
})