时间戳

首页 > 解决方案 > 如何从 HTML 中提取所见即所得的文本？

html - 如何从 HTML 中提取所见即所得的文本？

问题描述

当在浏览器中呈现时，HTML 文件令人赏心悦目且易于阅读，而当它以原始形式呈现时，很难理解。

是否可以从 HTML 片段中提取文本，并将其转换为具有基本格式的简单文本文件？

我的意思是一种松散的方法。移除 CSS，移除上标和下标。只保留人类理解新提取的文本所需的尽可能多的信息、文本和格式，就像他理解原始呈现的 HTML 片段一样。

PS：我尝试使用正则表达式，使用包容性方法来仅选择几个标签，并且很快证明两者都是不切实际的，因为 HTML 文件可能会变得非常棘手。

标签： htmltext

解决方案

一种选择是Turndown JS library，它既可以与 Node 一起使用，也可以作为 JS 库使用。它将 HTML 转换为 MarkDown。它还有一个演示页面，您可以在其中进行测试。

我用那个库创建了一个简单的例子，它在 textarea 中显示输出并下载文件（见这个答案）：

// See https://github.com/domchristie/turndown#usage
var turndownService = new TurndownService();
var markdown = turndownService.turndown(document.getElementById('content'));

// Output to textarea for preview
var textarea = document.getElementById('out');
textarea.value = markdown;

// Download function from https://stackoverflow.com/a/18197341/5845085
function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Download the file
download('text.md', markdown);
<div id="content" hidden>
  <h1>Title</h1>
  <p>Text text text text</p>
  <ul>
    <li>Text</li>
    <li>Text</li>
  </ul>
</div>

<textarea id="out" style="width: 80%; height: 200px;"></textarea>

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

推荐阅读