javascript - 如何在没有浏览器渲染的情况下发布 HTML 代码

Question

我要为该项目建立一个论坛，但现在我面临这个问题，我希望用户能够发布他们的 HTML源代码，因为它在这个forum中工作.

But the problem is that the code runs or scatters my design when retrieve from my DB.

我尝试使用repalce()在jQuery但我只能replace < with &lt;但我想要一个函数能够替换其他函数，例如 >,",'和&所以我的问题是如何更新这个功能。

function convert(div){
  var str =  $(div).html();
  var str2 =  str.replace(/</g,"&lt;");
  var sta =  $(div).html(str2);
  return sta;
}

上面的代码可以替换 <但是当我尝试包含>,",'时和&在函数中它将停止工作我怎样才能使它工作。

提前致谢。

Answer 1

粘贴在 <pre> 或 <code> 标签或两者，并确保使用 text()将内容插入标签时

function convert(div){
    var str =  $(div).html();
    var sta =  $('<code />', {text : str});

    return sta;
}

var result = convert( $('#test') );

$('#result').html(result)

#result {
  white-space : pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <span>
    <p>TEST</p>
  </span>
</div>
<br />
<div id="result">

<code>将保留代码，并且 <pre>将保留空白，但还有 CSS white-space属性，可以充当 <pre>使用 pre 标记设置