Question

我试图从div中获取一篇文章，问题是它在我使用$('#article').html()时获取所有内容是否有办法在没有其他元素的父div中获取特定的html？

<div id="article">
This is an article
blabla
<br/>
<b>something bold here</b>
    <div id="unknown">{some javscript}</div>
    <link type="anything" url="somewhere">
    <style>
        .something
    </style>
the end of the article
</div>

应该返回

this is an article
blabla
<br/>
<b>something bold here</b>
the end of the article

Answer 1

请参阅http://jsfiddle.net/TULKC/

var el=document.getElementById('article'),
    text=getText(el);
function getText(el){
    var els=el.childNodes,
        t='';
    for(var i=0;i<els.length;i++){
        if(els[i].nodeType==3){//If it's a text node
            if(!/^\s+$/.test(els[i].nodeValue)){//We avoid spaces
                t+=els[i].nodeValue;
            }
        }else if(els[i].nodeType==1){//If it's an element node
            var nName=els[i].nodeName.toLowerCase(),
                c=check(nName);
            if(c==1){//Allowed elements
                t+='<'+nName+'>'+getText(els[i])+'</'+nName+'>';
            }else if(c==2){//Allowed self-closing elements
                t+='<'+nName+' />';
            }
        }
    }
    return t;
}
function check(nodeName){
    switch(nodeName){
        case 'b': return 1;//Allowed elements
        case 'br':return 2;//Allowed self-closing elements
        default:return 0;
    }
}
alert(text);

注意：您可以通过以下方式添加更多例外：

switch(nodeName){
    case 'b': case 'a':  return 1;//Allowed elements
    case 'br':case 'img':return 2;//Allowed self-closing elements
    default:return 0;
}

（好吧，如果您使用HTML5，img不是自闭元素）

修改

如果要保留属性，可以使用以下功能

function getAttr(el){ var attr=el.attributes, t=''; for(var i=0;i<attr.length;i++){ t+=' '+attr[i].nodeName+'="'+attr[i].nodeValue+'"'; } return t; }

然后

if(c==1){ t+='<'+nName+getAttr(els[i])+'>'+getText(els[i])+'</'+nName+'>'; }else if(c==2){ t+='<'+nName+getAttr(els[i])+' />'; }

请在此处查看：http://jsfiddle.net/TULKC/4/

Answer 2

这样的事情可以让你得到你想要的东西：

(function($) {
    $article = $('#article').clone();

    $('div, link, style', $article).remove();

    console.log($article.html());
})(jQuery);

演示：http://jsfiddle.net/EQ7zC/

Answer 3

您可以在jQuery中使用innerText或.text（）来获取没有标签的所有文本，包括子项中的文本。

此外，如果您只需要获取父div中的文本，而不需要子元素的文本，则可以迭代它的子节点，并检查它是否是文本节点。

这样的事情：

var innerText = "";
$('#yourDiv').each(function(){
var $cn = this.childNodes;
    for (var i = 0, l = $cn && $cn.length || 0; i < l; i++) {
        if ($cn[i].nodeType == 3 && String($cn[i].nodeValue).split(/\s/).join('')) {
            innerText += $cn[i].nodeValue;
        }
    }
});
console.log(innerText);

Answer 4

这有可能吗？

 <div id="article">
   <a>This is an article               -- a starts article 
         blabla
       <br/>
       <b>something bold here</b>
   </a>                                 -- /a ends article

<div id="unknown">{some javscript}</div>
<link type="anything" url="somewhere">
<style>
    .something
</style>

文章的结尾

                   $('#article').find('a').html();

选择父div中的特定元素

4 个答案: