javascript - 将 html 转换为文本表示形式，并保留标签的空白含义——如何实现？

Question

考虑这样的 html 片段:

<p>foo</p><p>bar</p>

如果您为它运行(例如)jQuery text，您将得到“foobar”——所以它实际上是原始文本，而不是文本表示。

我正在寻找一些现成的库来获取文本表示，在本例中它应该是 -- "foo\nbar"。或者聪明的提示如何使这尽可能简单;-)。

注意:我不是在寻找漂亮的输出文本，而是在寻找保留空格的含义，因此:

<tr><td>foo</td><td>bar</td></tr>
<tr><td>1</td><td>2</td></tr>

我会很高兴

foo bar
1 2

它不一定是:

foo bar
1   2

(但当然没有伤害)。

Answer 1

你看过innerText了吗？或 textContent属性？

function getText(element){
    var s = "";
    if(element.innerText){
        s = element.innerText;
    }else if(element.textContent){
        s = element.textContent;
    }
    return s;
}

示例

向正文添加 PRE 标记并附加正文文本。

document.body.appendChild(
    document.createElement('pre')
)
.appendChild(
    document.createTextNode(
        getText(document.body)
    )
);

---

编辑

使用范围是否适用于 firefox？

var r = document.createRange();
r.selectNode(document.body);
console.log(r.toString());

---

编辑

看起来你被困在这样的解析函数中了。

var parse = function(element){
    var s = "";
    for(var i = 0; i < element.childNodes.length; i++){
        if(/^(iframe|noscript|script|style)$/i.test(element.childNodes[i].nodeName)){
            continue;
        }else if(/^(tr|br|p|hr)$/i.test(element.childNodes[i].nodeName)){
            s+='\n';
        }else if(/^(td|th)$/.test(element.childNodes[i].nodeName)){
            s+='\t';
        }

        if(element.childNodes[i].nodeType == 3){
            s+=element.childNodes[i].nodeValue.replace(/[\r\n]+/, "");
        }else{
            s+=parse(element.childNodes[i]);
        }
    }
    return s;
}

console.log(parse(document.body));