v-html高亮关键字

最新推荐文章于 2024-09-03 20:56:14 发布

senbinkop66

最新推荐文章于 2024-09-03 20:56:14 发布

阅读量447

点赞数 5

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/senbinkop66/article/details/134936237

版权

你可以使用 Vue 的 v-html 渲染，并在渲染时使用一个处理函数来高亮其中的字母 “b” 和 “t”，但排除  、<、>、&quote; 中的 “t”。以下是一个简单的例子：

<template>
  <div v-html="highlightedHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      str: '<html>dsdsdbfu粉红色b的从事微风ewcfdf;&nbsp;dsi&lt;注册&gt;dsids大萨达是多b看得我看看、&nbsp;s k &quote;dsjoo </html>',
    };
  },
  computed: {
    highlightedHtml() {
      return this.highlightLetters(this.str);
    },
  },
  methods: {
    highlightLetters(inputString) {
      return inputString.replace(/([bt])|(&[a-zA-Z]+;)/g, (match, letter, entity) => {
        if (letter) {
          // 高亮字母 "b" 和 "t"
          return `<span style="color: red;">${letter}</span>`;
        } else {
          // 不处理 "&nbsp;", "&lt;", "&gt;", "&quote;" 中的 "t"
          return entity;
        }
      });
    },
  },
};
</script>

这个例子中的 highlightLetters 方法使用正则表达式将字符串中的字母 “b” 和 “t” 替换为带有红色样式的 <span>，同时保留  、<、>、&quote;。在模板中，使用 v-html 渲染经过处理的字符串。请注意，使用 v-html 需要谨慎，确保渲染的内容是安全的。