显示字符串为HTML

发布于 2025-02-09 16:07:25 字数 1002 浏览 2 评论 0原文

如何渲染一个字符串以HTML的形式显示？我试图接受各种字符串。我应该能够检查字符串是否为HTML，如果是，我需要使用HTML格式显示它，否则正常显示为字符串。

示例：

<template>
  <div v-for="msg in msgs" :key="msg">
    {{ msg }}
  </div>
</template>

// msgs will look like this:
const msgs = ['hello there', '<b>print this in bold</b>', '<br/>', 'and this is in another line']

我试图做类似的事情：

<template>
  <div v-for="msg in msgs" :key="msg">
     {{ isHtml(msg) ? processAsHtml(msg) : msg }}
  </div>
</template>

其中processAshtml是这样的：

const parser = new DOMParser()

function processAsHtml (htmlString) {
  return parser.parseFromString(htmlString, 'text/html')
}

但是，这将HTML线打印为“ [对象htmldocument]”的

帮助！

谢谢！

原文

How can I render a string to be displayed as an html?
I am trying to accept an array of strings. I should be able to check if the string is an html, if yes, I need to display it with html formatting, otherwise display normally as a string.

Example:

<template>
  <div v-for="msg in msgs" :key="msg">
    {{ msg }}
  </div>
</template>

// msgs will look like this:
const msgs = ['hello there', '<b>print this in bold</b>', '<br/>', 'and this is in another line']

I tried to do something like this:

<template>
  <div v-for="msg in msgs" :key="msg">
     {{ isHtml(msg) ? processAsHtml(msg) : msg }}
  </div>
</template>

Where processAsHtml is like this:

const parser = new DOMParser()

function processAsHtml (htmlString) {
  return parser.parseFromString(htmlString, 'text/html')
}

But this prints the html lines as "[object HTMLDocument]"

Help!

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故人的歌 2025-02-16 16:07:25

您可以使用V-HTML

<template>
  <div v-for="msg in msgs" :key="msg">
     <div v-html="msg">
     </div>
  </div>
</template>

you can use v-html

<template>
  <div v-for="msg in msgs" :key="msg">
     <div v-html="msg">
     </div>
  </div>
</template>

回复收藏 0 原文

真心难拥有 2025-02-16 16:07:25

如其他建议，仅在模板中打印行HTML，您可以直接使用 v-html 指令。

但是，如果您想检查哪些字符串是正常的字符串，哪些是正常的字符串。您可以在Regex和 string.match（） 方法。

实时演示：

new Vue({
  el: '#app',
  data: {
    msgs: ['hello there', '<b>print this in bold</b>', '<br/>', 'and this is in another line']
  },
  mounted() {
    this.msgs.forEach(str => {
        if (str.match(/(<[^>]+>|<\/>)/ig)) {
        console.log('Not a mornal string : ', str);
      } else {
        console.log('Normal string : ', str);
      }
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="msg in msgs" :key="msg" v-html="msg">
  </div>
</div>

注意： as Nikola 建议在这种情况下请检查XSS漏洞。最佳实践是在HTML结合之前对弦进行消毒。

As other suggested, Just to print the row HTML in the template you can directly use v-html directive.

But If you want to check that which strings are normal strings and which are not a normal. That you can check with the help of regex and String.match() method.

Live Demo :

new Vue({
  el: '#app',
  data: {
    msgs: ['hello there', '<b>print this in bold</b>', '<br/>', 'and this is in another line']
  },
  mounted() {
    this.msgs.forEach(str => {
        if (str.match(/(<[^>]+>|<\/>)/ig)) {
        console.log('Not a mornal string : ', str);
      } else {
        console.log('Normal string : ', str);
      }
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="msg in msgs" :key="msg" v-html="msg">
  </div>
</div>

Note : As Nikola suggested, Kindly check for the XSS Vulnerabilities in this case. Best practice is to sanitize the strings which is not normal before binding in HTML.

回复收藏 0 原文

~没有更多了~