从HTML中提取文本,同时保留块级元素换行符

Question

背景

关于从HTML中提取文本(即剥离标签)的大多数问题都使用:

jQuery( htmlString ).text();

虽然这抽象了浏览器的不一致性(例如innerTextvs. textContent),但函数调用也忽略了块级元素(例如li)的语义含义.

问题

正如Mike Wilcox描述的那样,在各种浏览器中保留块级元素的新行(即语义意图)需要不小的努力.

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

我也尝试整合Mike Wilcox的JavaScript代码.该代码适用于Chromium,但不适用于Firefox.

题

什么是从HTML中提取文本的最简单的跨浏览器方式,同时使用jQuery(或vanilla JavaScript)保留块级元素的语义换行符？

例

考虑:

1. 选择并复制整个问题.
2. 打开textarea示例页面.
3. 将内容粘贴到textarea中.

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/

也就是说,除了两个例外,迭代每个节点并打印其内容,让浏览器的计算样式告诉您何时插入换行符.