通过 TextArea 控件将 HTML 富文本转换为纯文本答案

【问题标题】：HTML Rich-Text to Plain-Text by TextArea control通过 TextArea 控件将 HTML 富文本转换为纯文本
【发布时间】：2014-09-17 14:09:46
【问题描述】：

我正在从服务器读取一些内容丰富的文本，并尝试以纯文本格式将其显示在网格中。这就是我遇到这个问题的地方。我无法摆脱 html 样式标签。我不想编写一些肮脏的 JS/Jquery 代码来删除 HTML 样式标签，因为不可能处理所有标签。所以我想了一个技巧，在 HTML 页面上创建了一个隐藏的 textarea：

<textarea name="textarea" id="temp_desc" rows="10" cols="50" style="visibility: hidden"></textarea>

在 JS 中，当我从服务器读取数据时，我将其写入此文本区域，然后将其读回，以便所有 html 标记都应删除，但它不起作用。 html 标签本身被写入这个文本区域：

document.getElementById("temp_desc").value = Description;
Description = document.getElementById("temp_desc").value;

还有什么其他建议可以让我完成这项工作吗？

谢谢。

【问题讨论】：

您可以尝试改用Description = document.getElementById("temp_desc").innerText;。当通过在控制台中输入document.getElementsByClassName('post-text')[0].innerText 将innerText 技巧应用于您在此页面上的帖子时，我只会看到明文。没有格式化标签，没有任何风格，什么都没有。我看到的唯一 html 标签是您的第一个代码块中的标签，但这是意料之中的，因为它是可读的文本，而不是页面结构。

标签： javascript jquery html css

【解决方案1】：

我通过使用DIV而不是textarea和JQuery方法.text()解决了这个问题。

HTML:

<div id="temp_desc" style="visibility: hidden"></div>

JS:

$("#temp_desc").html(Description);
var descHiddenDIV = document.getElementById("temp_desc");
var temp_description = $(descHiddenDIV).text();

执行上述JS代码后，temp_description包含纯文本。

【讨论】：