Преобразование 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)); 

Answer 2

Я начал писать свою собственную функцию, вероятно, одновременно с Zapthedingbat, так что просто для записи:

var NodeTypeEnum = { Element    : 1,Attribute   : 2, Text:  3, Comment  :8,Document     :9};

function doTextualRepresentation(elem)
{
    if (elem.nodeType==NodeTypeEnum.Text)
        return elem.nodeValue;
    else if (elem.nodeType==NodeTypeEnum.Element || elem.nodeType==NodeTypeEnum.Document)
    {
        var s = "";

        var child = elem.firstChild;
        while (child!=null)
        {
            s += doTextualRepresentation(child);
            child = child.nextSibling;
        }

        if (['P','DIV','TABLE','TR','BR','HR'].indexOf(elem.tagName)>-1)
            s = "\n"+s+"\n";
        else if (['TD','TR'].indexOf(elem.tagName)>-1)
            s = "\t"+s+"\t";

        return s;

    }

    return "";
}

function TextualRepresentation(elem)
{
    return doTextualRepresentation(elem).replace(/\n[\s]+/g,"\n").replace(/\t{2,}/g,"\t");
}

Одна вещь, которой я удивляюсь - я не смог получить

for (var child in elem.childNodes)

работает, и очень жаль, потому что я больше всего времени провожу в C #, и мне нравится этот синтаксис, теоретически он должен работать в JS, но это не так.