regex 用Vue 3中的组件替换数据文本

bcs8qyzn 于 2022-11-18 发布在其他

关注(0)|答案(2)|浏览(178)

我希望在查询得到的数据上生成弹出高亮标记。目前，我尝试在文本中找到用花括号括起来的子字符串，然后用组件替换它们，但我不知道如何让Vue渲染和安装新组件
范例文字：

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

我创建了一个相当简单的正则表达式来查找和获取用花括号括起来的文本：

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

这是我目前尝试的代码：

<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>

我很清楚v-html不会呈现组件以避免XSS攻击，但这主要是为了展示我试图实现的目标。
我之所以在每个单词后面都有一个组件，是因为我希望组件在悬停时发出Web请求，以获取有关突出显示的单词的一些附加信息。
我在寻找最干净和/或最高效的解决方案-不一定非要Options API不可

regex

来源：https://stackoverflow.com/questions/74228654/replace-data-text-with-components-in-vue-3

2条答案

按热度按时间

06odsfpq1#

不确定这是否 * 干净 *，但它应该能满足您的要求-抱歉，是合成API，但它太简单了，转换为Options API很简单
第一个

赞(0）回复(0）举报 2022-11-18

hgtggwj02#

v-html将文本解释为原始html，不进行任何数据绑定，这意味着它不创建任何组件。
对于当前的主题，如果您想突出显示某些匹配的文本，我使用了一个mark html标记

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

在模板中，我在对象的字段上使用了v-html。

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

现在，在您的例子中，您可以检查文本，为每个单词创建一个新对象，该对象带有一个布尔标志，指示该单词是否应该突出显示，并基于此，使用v-for指令遍历该列表，如果应该突出显示，则使用MyComponent，否则使用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>

资源：

https://vuejs.org/guide/essentials/template-syntax.html#raw-html
https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

赞(0）回复(0）举报 2022-11-18

我来回答

regex 用Vue 3中的组件替换数据文本

2条答案

相关问题

热门标签

最新问答