JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <template v-for="item in textArray">
    <strong v-if="item.type === 'entity'">{{ item.value }}</strong>
    <template v-else>{{ item.value }}</template>
  </template>
</div>

JavaScript

Vue.createApp({
  data () {
    return {
      text: '{investigator:"02005"} played {card:"Duke":"02014":"521591b1-1257-4df2-ab77-b0153c8cf58b"}'
    }
  },
  
  computed: {
    textArray () {
      const placeholderRe = /(\{[^}]*})/
      const items = this.text.split(placeholderRe).filter(item => item)
      
      return items.map(item => {
        if (placeholderRe.test(item)) {
          return {
            type: 'entity',
            value: item.slice(1, -1)
          }
        }
        
        return {
          type: 'text',
          value: item
        }
      })
    }
  }
}).mount('#app')