正确渲染html字符串

最新推荐文章于 2025-07-06 09:56:38 发布

原创最新推荐文章于 2025-07-06 09:56:38 发布 · 5.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#渲染html #渲染html字符串 #转义html字符串 #转义html

javascript 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种安全渲染HTML字符串的方法，通过将尖括号转义为HTML实体，确保只有合法的HTML标签被正确渲染，避免了潜在的安全风险。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正确渲染html字符串

前言

在渲染 html 字符串时，需要将合法的 html 标签渲染出来，对部分字符（ <、> ）转义成 html 实体。

代码

var str = `111<br     />sdfsdfsdf<h1 class="ddd"> 哈哈哈</h1>请看题（）。i=0，s=0；while (s<n) {s=s+i；i++；}<br>else:<br   >    print 2<p >段落1</p><p>段落2</p>`
// 将 <、> 转义成 html 实体
function htmlSelfEncode (str) {
  if (typeof str !== 'string') {
    return ''
  }
  let s = ''
  if (str.length === 0) {
    return s
  }
  s = str.replace(/</g, '&lt;')
  s = s.replace(/>/g, '&gt;')
  return s
}
// 渲染 html 字符串
function renderHtml (str) {
  if (typeof str !== 'string') {
     return ''
   }
   const regPre = /<\/?[a-zA-Z]+[1-9]?\s*(\s+[a-zA-Z]+=("[^</>]*"|'[^</>]*'|[^</>]*))*\/?>/g
   const arrPre = str.match(regPre) || []
   let resultArr = []
   arrPre.forEach((v, i) => {
     let index = str.indexOf(v)
     let temp = str.substring(0, index)
     resultArr.push(this.htmlSelfEncode(temp), v)
     str = str.substring(index + v.length)
   })
   resultArr = resultArr.filter(v => v)
   return resultArr.join('')
}
renderHtml(str) // "111<br     />sdfsdfsdf<h1 class="ddd"> 哈哈哈</h1>请看题（）。i=0，s=0；while (s&lt;n) {s=s+i；i++；}<br>else:<br   >    print 2<p >段落1</p><p>段落2</p>"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>渲染html字符串</title>
  <style>
    .render-html{
      border: 1px solid #BBBFCD;
      padding: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div>
    <h1>原始字符串</h1>
    <div id="pre" class="render-html"></div>
    <h1>转义 &lt; 和 &gt; 为 html 实体后</h1>
    <div id="next" class="render-html"></div>
  </div>
  <script>
    var str = `111<br     />sdfsdfsdf<h1 class="ddd"> 哈哈哈</h1>请看题（）。i=0，s=0；while (s<n) {s=s+i；i++；}<br>else:<br   >    print 2<p >段落1</p><p>段落2</p>`
    // 将 <、> 转义成 html 实体
    function htmlSelfEncode (str) {
      if (typeof str !== 'string') {
        return ''
      }
      let s = ''
      if (str.length === 0) {
        return s
      }
      s = str.replace(/</g, '&lt;')
      s = s.replace(/>/g, '&gt;')
      return s
    }
    // 渲染 html 字符串
    function renderHtml (str) {
      if (typeof str !== 'string') {
	      return ''
	    }
	    const regPre = /<\/?[a-zA-Z]+[1-9]?\s*(\s+[a-zA-Z]+=("[^</>]*"|'[^</>]*'|[^</>]*))*\/?>/g
	    const arrPre = str.match(regPre) || []
	    let resultArr = []
	    arrPre.forEach((v, i) => {
	      let index = str.indexOf(v)
	      let temp = str.substring(0, index)
	      resultArr.push(this.htmlSelfEncode(temp), v)
	      str = str.substring(index + v.length)
	    })
	    resultArr = resultArr.filter(v => v)
	    return resultArr.join('')
    }
    const pre = document.querySelector('#pre')
    const next = document.querySelector('#next')
    pre.innerHTML = str
    next.innerHTML = renderHtml(str)
    console.log(str)
    console.log(renderHtml(str))
  </script>
</body>
</html>