等标签被转义成字符"markdown中插入视频前台渲染出来导致等标签被转义成字符

2023/12/31 11:02:17

编程Tag： html

本文主要是介绍等标签被转义成字符"markdown中插入视频前台渲染出来导致等标签被转义成字符，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

markdown中插入视频前台渲染出来导致<video>等标签被转义成字符解决办法：

如图：

在markdown里面插入视频，可以按照下面写法，哈哈，虽然很捞，但是还是可以满足的。

<video src="https://xxxxxxxxxxxxxx.mp4" controls="true"  style="max-width: 100%;height: auto;"></video>

前台打印出来是这样的：

可以看到，标签的< > 等已经被转义字符了。所以这就需要我们在前端获取的视频把这个字符还原的，使用到了：

HtmlDecode：把经过 HtmlEncode编码过的字符解码，还原成原始字符。

具体使用：

你可以使用npm命令来安装`he`库，具体步骤如下：

1. 打开终端或命令行工具，进入Vue项目的根目录。
2. 运行以下命令安装`he`库：

npm install he --save

这将会在你的Vue项目中安装`he`库，并将其保存到`package.json`文件的依赖项中。

3. 在需要使用`he`库的Vue组件或JavaScript文件中导入它：

import he from 'he';

4. 现在你就可以在Vue组件或JavaScript文件中使用`he`库提供的方法了。例如，你可以使用`he.decode`方法来进行HTML解码：

const htmlString = '&lt;p&gt;Hello, &lt;strong&gt;world&lt;/strong&gt;!&lt;/p&gt;';
const decodedString = he.decode(htmlString);
console.log(decodedString); // 输出: "<p>Hello, <strong>world</strong>!</p>"

5.markdown在vue页面的中具体使用如下：

import he from 'he';

export default {
  data() {
    return {
      article: {},
      articleContentHtml: ''
    }
  },
  methods: {
    htmlDecode(value) {
      // 自定义转义逻辑
      return he.decode(value);
    },
    fetchData() {
      // 假设这里是获取数据的异步请求
      // 在请求成功后执行以下代码
      if (!this.$common.isEmpty(res.data)) {
        this.article = res.data; //获取所有数据
        this.getNews();
        const md = new MarkdownIt({ breaks: true });
        this.articleContentHtml = md.render(this.article.articleContent);  //渲染文章的所有内容
        this.articleContentHtml = this.htmlDecode(this.articleContentHtml); // 使用HtmlDecode转义还原字符
      }
    }
  },
  created() {
    this.fetchData();
  }
}

具体用法自己按照实际情况来看：

HtmlEncode：将 Html 源文件中不允许出现的字符进行编码。例如："<"、">"、"&" 等。

HtmlDecode：把经过 HtmlEncode编码过的字符解码，还原成原始字符。

UrlEncode：将 Url 中不允许出现的字符进行编码。例如：":"、"/"、"?" 等。

UrlDecode：把经过 UrllEncode编码过的字符解码，还原成原始字符。

这篇关于等标签被转义成字符"markdown中插入视频前台渲染出来导致等标签被转义成字符的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

等标签被转义成字符"markdown中插入视频前台渲染出来导致等标签被转义成字符

markdown中插入视频前台渲染出来导致<video>等标签被转义成字符解决办法：

相关编程文章