-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 に答える