从 DOM 保留换行符中提取无格式文本的最佳方法

Best way to extract unformatted text from DOM preserving line breaks?

本文关键字：文本 最佳 方法 无格式 提取 DOM 保留 换行符      更新时间：2023-09-26

假设我在HTML中TEXT了以下元素：

<div id="TEXT">
  <p>First <strong>Line</strong></p>
  <p>Seond <em>Line</em></p>
</div>

应该如何从这个元素中提取原始文本，没有 HTML 标记，但保留换行符？

我知道以下两个选项，但它们似乎都不完美：

  1. document.getElementById("TEXT").textContent
    • 返回
      • First LineSecond Line
    • 问题：忽略段落之间应包含的换行符
  2. document.getElementById("TEXT").innerText
    • 返回
      • First Line Second Line
    • 问题：不是 W3C 标准的一部分，不能保证在所有浏览器中都能正常工作

这是一个方便的函数，用于获取任何元素的文本内容，它在所有平台上都运行良好，是的，它保留了换行符。

function text(e){
    var t = "";
    e = e.childNodes || e;
    for(var i = 0;i<e.length;i++){
        t+= e[i].nodeType !=1 ? e[i].nodeValue : text(e[i].childNodes);
    }
    return t;
}

你可以检查jQuery是如何做到的。它使用嘶嘶声js。这是您可以使用的功能。

<div id="TEXT">
  <p>First <strong>Line</strong></p>
  <p>Seond <em>Line</em></p>
</div>
<script>
var getText = function( elem ) {
    var node,
        ret = "",
        i = 0,
        nodeType = elem.nodeType;
    if ( !nodeType ) {
        // If no nodeType, this is expected to be an array
        while ( (node = elem[i++]) ) {
            // Do not traverse comment nodes
            ret += getText( node );
        }
    } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
        // Use textContent for elements
        // innerText usage removed for consistency of new lines (jQuery #11153)
        if ( typeof elem.textContent === "string" ) {
            return elem.textContent;
        } else {
            // Traverse its children
            for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
                ret += getText( elem );
            }
        }
    } else if ( nodeType === 3 || nodeType === 4 ) {
        return elem.nodeValue;
    }
    // Do not include comment or processing instruction nodes
    return ret;
};
console.log(getText(document.getElementById('TEXT')));
<script>
相关文章：