Replace data text with components in Vue 3

Question

I'm looking to generate popover highlight tags on data that I've gotten from a query. Currently, I've tried finding substrings wrapped in curly braces within the text, then replacing them with components, but I can't figure out how to get Vue to render & mount the new components

Example text:

Lorem {ipsum} dolor sit amet, consectetur {adipiscing} elit, sed do eiusmod tempor incididunt

I've created a fairly simple regex to find and grab text wrapped in curly braces:

\{(.[^{}]*)\}

And this is the code I've tried so far:

<template>
  <span v-html="paragraphText"></span>
</template>

<script lang="ts">
import {MyComponent} from '#components';

export default defineComponent({
  data () {
    return {
      paragraphText: '',
    }
  },

  created () {
    const re = /\{(.[^{}]*)\}/g;
    let newText = `${this.text}`;
    let match: RegExpExecArray;

    do {
      match = re.exec(newText);
      if (match) {
        newText = newText.replace(
          match[0],
          `<MyComponent ref='${match[1]}' style='font-weight:bold;'>${match[1]}</MyComponent>`
        );
      }
    } while (match);
    
    this.paragraphText = newText;
  },

  components: {
    MyComponent,
  }
})
</script>

I'm well aware that v-html won't render components to avoid XSS attacks, but this is mostly just to show what I'm trying to achieve.

My reasoning behind having a component behind each one, is that I want the component to make a web request on hover, to grab some additional information about the word being highlighted.

I'm looking for the cleanest and/or most efficient solution possible - it doesn't have to be Options API

This is likely XY problem. Consider reasking with your case being explained. Depending on why this data has to be passed as a string, you may want to reconsider this. v-html is for html, as the name implies. It can't render components. You'd need runtime template compiler to make it work, which is an exotic case — Estus Flask
– Estus Flask, Commented Oct 27, 2022 at 22:37
@EstusFlask I've explained my case at the top of my post - I want to render popovers on text content grabbed in an ajax request. Perhaps this way that I'm trying to go about it with isn't the simplest, but to me it seems that this method would lead to the cleanest code and compiled html? — Whambulance
– Whambulance, Commented Nov 1, 2022 at 10:14
It wasn't explained enough. If this is plain HTML that is received from back end, you don't need to render components inside it, it can be handled with v-html as is. — Estus Flask
– Estus Flask, Commented Nov 1, 2022 at 10:22
@EstusFlask Yes, but as I explained further down I'm not recieving plain HTML from the backend, I'm receiving text - so I'm trying to find a solution that handles rendering it on the frontend — Whambulance
– Whambulance, Commented Nov 1, 2022 at 11:21

Jaromanda X · Accepted Answer · 2022-10-27 23:34:37Z

Not sure if this is clean but it should do what you require - sorry, composition API, but it's so simple its trivial to convert to Options API

const { createApp, ref, computed } = Vue;

createApp({
    setup() {
        const data = ref("Lorem {ipsum} dolor sit amet, consectetur {adipiscing} elit, sed do eiusmod tempor incididunt");
        const magic = computed(() => data.value.split('}').map(v => v.split('{')));
        return { data, magic };
    }
}).mount('#app');

.this.would.be.your.component.rather.than.a.span {
  background-color :#ffdddd;
}

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <span v-for="([text, tag], i) in magic" :key="i">
    <span v-if="text.length">{{ text }}</span>
    <span class="this would be your component rather than a span" v-if="tag?.length" :title="`this is tag: ${tag}`">{{ tag }}</span>
  </span>
</div>

Nikola Gava · Accepted Answer · 2022-10-28 11:55:53Z

v-html interprets text as raw html, without doing any data binding, meaning it doesn't create any components. Maybe you want dynamic components instead?

On the topic at hand, if you want to highlight some matched text, I did it this way by using a mark html tag

const highlightText = (word: string, search: RegExp): string => {
  return word.replace(search, function (matchedText) {
    return '<mark class="highlight">' + matchedText + '</mark>';
  });
};

And in template, I used v-html on object's field.

<span v-if="isHighlighted" v-html="object.text"></span>
<span v-else>{{ object.text }}</span>

Now, in your case, you could go over your text, create a new object for each word with a boolean flag that indicates whether the word should be highlighted or not, and based on that iterate through that list with v-for directive, if it should be highlighted, use MyComponent otherwise use a span.

<div v-for="(word, index) in words" :key="index">
    <MyComponent v-if="word.isHighlighted" :data="word.text" />
    <span v-else>{{ word.text }}</span>
</div>

Resources:

Collectives™ on Stack Overflow

Replace data text with components in Vue 3

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related