-2

我试图从一个 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
4

4 回答 4

2

见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/

于 2012-08-27T01:36:41.130 回答
1

我猜这样的事情应该会给你你想要的东西：

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

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

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

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

于 2012-08-27T01:14:59.840 回答
1

您可以在 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);
于 2012-08-27T01:21:47.190 回答
0

这是一种可能性吗？

 <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();
于 2012-08-27T01:11:59.160 回答