1

我做了以下函数来解析一个类中的所有子元素：

function getBodyHTML(data){
    var elements = "";
    var content = $(data).find(".mw-content-ltr").children();
    $(content).each(function(i, row){
        if($(row).is("h2")){        
            elements = elements.concat("<h2 class="header2">Header 2 content is: "+($(row).text())+"</h1>");
        }else if($(row).is("h1")){
            elements = elements.concat("<h1 class="header1">Header 1 content is: "+($(row).text())+"</h1>");
        }else if($(row).is("h3")){
            elements = elements.concat("<h3>"+($(row).text())+"</h3>");
        }else if($(row).is("p")){
            elements = elements.concat("<p>"+$(row).text()+"</p>");
        }

    });

        return elements;
    }

该函数可以满足我对这种 html 的要求：

<h2 class="main-header">Some Text</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh. </p>
<p>euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim</p>
<h1>Another text</h1>
<p>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>

但是当 HTML 以这种方式出现时，我无法获得全文：

<h2 class="main-header">Some Text</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh.
<h1>Another text</h1>
<p>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>

如您所见，h2之后的第一个文本没有任何标记。

我应该在我的函数中添加什么条件来选择那些没有标签的文本？

提前致谢！

4

3 回答 3

3

您可以使用contents()而不是children()获取文本节点。

文本节点有一个nodeType。3

这里有一些例子：

http://jsfiddle.net/A2Lyx/

以下是更改代码的方法：

function getBodyHTML(data) {
    var elements = "";
    var content = $(data).find(".mw-content-ltr").contents();
    $(content).each(function (i, row) {
        if (row.nodeType == 3) {
            var text = $.trim(row.textContent);
            if (text.length > 0)
                elements = elements.concat("text content: " + text);
        else if ($(row).is("h2")) {
            elements = elements.concat("<h2 class="
            header2 ">Header 2 content is: " + ($(row).text()) + "</h1>");
        } else if ($(row).is("h1")) {
            elements = elements.concat("<h1 class="
            header1 ">Header 1 content is: " + ($(row).text()) + "</h1>");
        } else if ($(row).is("h3")) {
            elements = elements.concat("<h3>" + ($(row).text()) + "</h3>");
        } else if ($(row).is("p")) {
            elements = elements.concat("<p>" + $(row).text() + "</p>");
        }
    });

    return elements;
}
于 2013-09-25T17:50:12.960 回答
2

您可以使用.contents()方法代替.children()并检查nodeType节点的：

$(data).find(".mw-content-ltr").contents().each(function(_, row) {
    // ...
    } else if ( row.nodeType === 3 && $.trim(row.nodeValue).length ) {
       var textNodeValue = $.trim(row.nodeValue);
    }
});
于 2013-09-25T17:49:56.500 回答
1

在你的 if 块中添加 else

else{
   elements = elements.concat($(row).html());
}

就像是：

function getBodyHTML(data){
var elements = "";
var content = $(data).find(".mw-content-ltr").children();
$(content).each(function(i, row){
    if($(row).is("h2")){        
        elements = elements.concat("<h2 class="header2">Header 2 content is: "+($(row).text())+"</h1>");
    }else if($(row).is("h1")){
        elements = elements.concat("<h1 class="header1">Header 1 content is: "+($(row).text())+"</h1>");
    }else if($(row).is("h3")){
        elements = elements.concat("<h3>"+($(row).text())+"</h3>");
    }else if($(row).is("p")){
        elements = elements.concat("<p>"+$(row).text()+"</p>");
    }
    else{
       elements = elements.concat($(row).html());
    }

});

    return elements;
}
于 2013-09-25T17:42:04.867 回答