javascript - 从 HTML 中提取文本，同时保留 block 级元素换行符

Question

背景

大多数关于从 HTML 中提取文本的 questions(即 stripping 标签)使用:

jQuery( htmlString ).text();

虽然这抽象了浏览器的不一致(例如 innerText 与 textContent )，但函数调用也忽略了 block 级元素的语义(例如 li )。

问题

在各种浏览器中保留 block 级元素的换行符(即语义意图)需要付出不小的努力，如 Mike Wilcox describes 。

一个看似更简单的解决方案是模拟将 HTML 内容粘贴到 <textarea> 中，它在保留 block 级元素换行符的同时剥离 HTML。但是，当用户将内容粘贴到 <textarea> 时，基于 JavaScript 的插入不会触发浏览器使用的相同 HTML 到文本例程。

我还尝试集成 Mike Wilcox 的 JavaScript code 。该代码在 Chromium 中有效，但在 Firefox 中无效。

问题

使用 jQuery(或 block-level elements)从 HTML 中提取文本同时保留语义换行符的最简单的跨浏览器方法是什么？

例子

考虑:

1. 选择并复制整个问题。
2. 打开 vanilla JavaScript 。
3. 将内容粘贴到文本区域。

textarea 保留有序列表、标题、预格式化文本等的换行符。这就是我想要达到的结果。

为了进一步说明，给定任何 HTML 内容，例如:

   <h1>Header</h1>
   <p>Paragraph</p>
   <ul>
     <li>First</li>
     <li>Second</li>
   </ul>
   <dl>
     <dt>Term</dt>
       <dd>Definition</dd>
   </dl>
   <div>Div with <span>span</span>.<br />After the <a href="...">break</a>.</div>

你会如何生产:

  Header
  Paragraph

    First
    Second

  Term
    Definition

  Div with span.
  After the break.

注意:缩进和非规范化空格都不相关。

Answer 1

考虑:

/**
 * Returns the style for a node.
 *
 * @param n The node to check.
 * @param p The property to retrieve (usually 'display').
 * @link http://www.quirksmode.org/dom/getstyles.html
 */
this.getStyle = function( n, p ) {
  return n.currentStyle ?
    n.currentStyle[p] :
    document.defaultView.getComputedStyle(n, null).getPropertyValue(p);
}

/**
 * Converts HTML to text, preserving semantic newlines for block-level
 * elements.
 *
 * @param node - The HTML node to perform text extraction.
 */
this.toText = function( node ) {
  var result = '';

  if( node.nodeType == document.TEXT_NODE ) {
    // Replace repeated spaces, newlines, and tabs with a single space.
    result = node.nodeValue.replace( /\s+/g, ' ' );
  }
  else {
    for( var i = 0, j = node.childNodes.length; i < j; i++ ) {
      result += _this.toText( node.childNodes[i] );
    }

    var d = _this.getStyle( node, 'display' );

    if( d.match( /^block/ ) || d.match( /list/ ) || d.match( /row/ ) ||
        node.tagName == 'BR' || node.tagName == 'HR' ) {
      result += '\n';
    }
  }

  return result;
}

http://jsfiddle.net/3mzrV/2/

也就是说，除了一两个异常(exception)，遍历每个节点并打印其内容，让浏览器的计算样式告诉您何时插入换行符。