在没有浏览器环境的JS中将HTML转换为纯文本答案

【问题标题】：Convert HTML to plain text in JS without browser environment在没有浏览器环境的JS中将HTML转换为纯文本
【发布时间】：2013-03-02 22:28:35
【问题描述】：

我有一个 CouchDB 视图映射函数，它生成存储的 HTML 文档的摘要（文本的第一个 x 个字符）。不幸的是，我没有将 HTML 转换为纯文本的浏览器环境。

目前我使用这个多阶段正则表达式

html.replace(/<style([\s\S]*?)<\/style>/gi, ' ')
    .replace(/<script([\s\S]*?)<\/script>/gi, ' ')
    .replace(/(<(?:.|\n)*?>)/gm, ' ')
    .replace(/\s+/gm, ' ');

虽然它是一个非常好的过滤器，但它显然不是一个完美的过滤器，有时会漏掉一些残留物。有没有更好的方法可以在没有浏览器环境的情况下转换为纯文本？

【问题讨论】：

它可能归结为使用您列出的大量替换的正则表达式，然后使用指定的列表替换，例如 :active;完成清洗。
stackoverflow.com/a/29706729/3338098 保留换行符并去除 html 标签

标签： javascript regex couchdb

【解决方案1】：

这个简单的正则表达式有效：

text.replace(/<[^>]*>/g, '');

它会移除所有锚点。

像&lt; 这样的实体不包含

【讨论】：

还有实体需要照顾
像魅力一样工作！
成功了！但解析用户在“”中放置单词的那些html文本是一个挑战。
适用于我在 Ajax 中运行的来自 PHP 的格式化 HTML 错误消息。

【解决方案2】：

将 HTML 转换为 Gmail 等纯文本：

html = html.replace(/<style([\s\S]*?)<\/style>/gi, '');
html = html.replace(/<script([\s\S]*?)<\/script>/gi, '');
html = html.replace(/<\/div>/ig, '\n');
html = html.replace(/<\/li>/ig, '\n');
html = html.replace(/<li>/ig, '  *  ');
html = html.replace(/<\/ul>/ig, '\n');
html = html.replace(/<\/p>/ig, '\n');
html = html.replace(/<br\s*[\/]?>/gi, "\n");
html = html.replace(/<[^>]+>/ig, '');

如果你可以使用jQuery：

var html = jQuery('<div>').html(html).text();

【讨论】：

DOM 转换的方式是有问题的。如果 html 未被清理，这将加载 HTML sn-p 中的所有链接。这应该通过未附加到 DOM 的文档片段来完成。
不会在TEXT1<div>TEXT2</div> 中添加\n，即它返回TEXT1TEXT2\n
+1 以获得好的答案。但我还想在上面的代码中将多个换行符替换为一个。请帮忙
var html = jQuery(html).text(); 更简单。
替换方法对我有用。使用 jQuery html(...) 或 document.createElement(...) 的版本似乎都加载了可能包含在内容中的图像和脚本，这是浪费时间和潜在的安全风险（我使用这个函数来显示来自用户输入的示例内容）

【解决方案3】：

使用 TextVersionJS (http://textversionjs.com)，您可以将 HTML 转换为纯文本。它是纯 javascript（包含大量 RegExp），因此您可以在浏览器和 node.js 中使用它。

在 node.js 中它看起来像：

var createTextVersion = require("textversionjs");
var yourHtml = "<h1>Your HTML</h1><ul><li>goes</li><li>here.</li></ul>";

var textVersion = createTextVersion(yourHtml);

（我从页面复制了示例，您必须先 npm install 模块。）

【讨论】：

注意：它将链接转换为标记，因此它不是“纯”文本。还是有帮助的。
它还直接传递 HTML 实体：&lt; 应转换为 &lt;，但保留为 &lt;。

【解决方案4】：

你可以试试这个方法。 textContent 和 innerText 都不兼容所有浏览器：

var temp = document.createElement("div");
temp.innerHTML = html;
return temp.textContent || temp.innerText || "";

【讨论】：

这并没有解决“没有浏览器环境”的问题。

【解决方案5】：

将 html 的 @EpokK 答案更新为 电子邮件文本版本 用例

const htmltoText = (html: string) => {
  let text = html;
  text = text.replace(/\n/gi, "");
  text = text.replace(/<style([\s\S]*?)<\/style>/gi, "");
  text = text.replace(/<script([\s\S]*?)<\/script>/gi, "");
  text = text.replace(/<a.*?href="(.*?)[\?\"].*?>(.*?)<\/a.*?>/gi, " $2 $1 ");
  text = text.replace(/<\/div>/gi, "\n\n");
  text = text.replace(/<\/li>/gi, "\n");
  text = text.replace(/<li.*?>/gi, "  *  ");
  text = text.replace(/<\/ul>/gi, "\n\n");
  text = text.replace(/<\/p>/gi, "\n\n");
  text = text.replace(/<br\s*[\/]?>/gi, "\n");
  text = text.replace(/<[^>]+>/gi, "");
  text = text.replace(/^\s*/gim, "");
  text = text.replace(/ ,/gi, ",");
  text = text.replace(/ +/gi, " ");
  text = text.replace(/\n+/gi, "\n\n");
  return text;
};

【讨论】：

【解决方案6】：

如果你想要一些准确的东西并且可以使用 npm 包，我会使用html-to-text。

来自自述文件：

const { htmlToText } = require('html-to-text');

const html = '<h1>Hello World</h1>';
const text = htmlToText(html, {
  wordwrap: 130
});
console.log(text); // Hello World

仅供参考，我在 npm 趋势上发现了这个； html-to-text 似乎是我用例的最佳选择，但您可以查看其他 here。

【讨论】：

【解决方案7】：

很简单，你也可以实现一个“toText”原型：

String.prototype.toText = function(){
    return $(html).text();
};

//Let's test it out!
var html = "<a href=\"http://www.google.com\">link</a>&nbsp;<br /><b>TEXT</b>";
var text = html.toText();
console.log("Text: " + text); //Result will be "link TEXT"

【讨论】：

真的不明白这个答案有什么意义。