jQuery 将 Html 转换为文本并返回

Posted 2023-05-07

【中文标题】jQuery 将 Html 转换为文本并返回

【英文标题】：jQuery Convert Html To Text And Back

【发布时间】：2015-02-21 13:03:06

【问题描述】：

如果我的网页上有一个文本区域供用户输入文本，我如何将其转换为在按下按钮时显示为 html，反之亦然？我正在寻找类似 wordpress 在用户输入文本然后将其转换为 html 或可以编写 html 并将其转换为文本时所做的事情。

到目前为止，我已经尝试了几段代码：

var text_only = $('.snippet').text();

这只会显示没有标签的html，这不会按预期呈现html，其他的也好不了多少

修正：请参阅链接以获得更好的说明 - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document

谢谢

尼克

【问题讨论】：

不太清楚。您的意思是您希望 textarea 中的确切文本成为 HTML 吗？或者你有[b] 之类的标签吗？

是的，很像这里：w3schools.com/html/tryit.asp?filename=tryhtml_basic_document

他们使用的是iframe

谢谢@Itay 在 iframe 中有什么特别需要我查看的内容吗？

并非如此。例如，参见this。此外，text() 不适用于 textarea，val() 将

【参考方案1】：

你的意思是这样的吗？ http://jsfiddle.net/7crysb0L/2

js:

$('#dohtml').click(function() 

    var textAreaVal = $('#myTextArea').val();

    $('#myDiv').html(textAreaVal);

);

$('#dotext').click(function() 

    var textAreaVal = $('#myTextArea').val();

    $('#myDiv').text(textAreaVal);

);

html:

<textarea id="myTextArea" placeholder="Type here, then click the button to update the div"></textarea>
<br />

<button id="dohtml">Make HTML</button>
<button id="dotext">Make Text</button>
<div id="myDiv"></div>

这会产生两个按钮。单击“制作 HTML：使用 textarea 中的 HTML 填充 myDiv，然后单击“制作文本” - 将 textarea 的内容视为文本并使用可见的 HTML 标签填充 div。

值得注意的是，这不是应该在当前状态下使用的代码，除非它只是客户端，因为它很容易插入不安全的值 - 例如，尝试运行 JS fiddle，将 </textarea><script>alert('lol')</script> 插入文本区域，然后单击“制作 HTML”以查看原因....您不想像这样将未经清理的垃圾保存到后端某个地方，但如果它只是用于演示目的，应该没问题。

jQuery html api 参考：http://api.jquery.com/html/

【参考方案2】：

var text_only = '<div>' + $('.snippet').text() + '</div&gt';

这里是小提琴：http://jsfiddle.net/p5hnttga/