web-dev-qa-db-ja.com

jQueryを使用してHTML要素間の空白と改行を削除します

JQueryを使用して、HTMLタグ間の空白と改行を削除したいと思います。

var widgetHTML = '    <div id="widget">        <h2>Widget</h2><p>Hi.</p>        </div>';

する必要があります：

alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div>

必要なパターンは次のとおりです。

>[\s]*<

これは正規表現を使用せずに達成できますか？

javascriptjqueryregexstringreplace
39
mager

User76888がレイアウトした手法を試したところ、うまく機能しました。利便性のためにjQueryプラグインにパッケージ化し、コミュニティがそれを楽しむかもしれないと思ったので、ここに：

jQuery.fn.cleanWhitespace = function() {
    this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

これを使用するには、スクリプトタグに含めるだけで、jQueryでクリーンアップするタグを選択し、次のように関数を呼び出します。

$('#widget').cleanWhitespace();
60
The Digital Gabeg

再帰バージョン：

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}
32
Blago

これでうまくいくと思う...

cleanWhitespace: function(element) {
 element = $(element);
 for (var i = 0; i < element.childNodes.length; i++) {
   var node = element.childNodes[i];
   if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
     Element.remove(node);
 }
}
20
user76888

HTMLをDOMノードに設定した後、おそらくこれをよりうまく行うことができます。ブラウザーがすべてを解析し、マークアップからDOMツリーを構築したら、DOMウォークを実行し、見つかったすべてのテキストノードについて、非空白文字がない場合は完全に削除するか、最初から空白を削除しますもしそうなら、それの終わり。

2
levik

これは私とステップバイステップの発見のために働いたものです：

出力はchrome console

最初に厄介な空白を含む親ノードを見つけます

_$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​]
_

[]ブラケットから配列にラップされていることがわかります。jQueryは、単一のアイテムが見つかった場合でも、常に構造のような配列を返します。

HTMLElementを取得するには、インデックス0の配列の最初のアイテムを取得します

_$('.controls label[class="radio"]').parent()[0];

<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​
_

[]ブラケットがなくなったことに注意してください。これを行う必要があるのは、jQueryはdomの空白を無視するが、HTMLElementは無視しないためです。childNodesプロパティにアクセスするとどうなるかを見てください。

_$('.controls label[class="radio"]').parent()[0].childNodes;

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]
_

配列が再びあります。はい、[]括弧を見つけましたが、別の違いがありますか。すべてのコンマを見てください。jQueryでは取得できませんでした。 HTMLElementに感謝しますが、forループの代わりにそれぞれを使用したいので、jQueryに戻ることができます。同意しますか？したがって、jQueryで配列をラップして、何が起こるかを見てみましょう。

_$($('.controls label[class="radio"]').parent()[0].childNodes);

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]
_

パーフェクト！まったく同じ構造ですが、jQueryオブジェクト内にあるため、それぞれを呼び出して「this」をコンソールに出力し、何があるかを確認します。

_$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   console.log('|'+$(this).html()+'|');
});

|<input id="gender_f" name="gender" type="radio" value="f">Female|
|undefined|
|undefined|
|<input id="gender_m" name="gender" type="radio" value="m" checked="">Male|
|undefined|
|undefined|
_

そこで、jQueryを使用して各要素のhtmlを取得します。標準的なものは `$（this）.htmlです。空白が見えないため、パイプで埋めることができます|ご覧のとおり、jQueryは空白をhtmlに変換できず、未定義になりました。しかし、スペースが真実である可能性がある場所は未定義であることは間違いなく偽です=）

それでは、jQueryで吸盤を取り除きましょう。必要なのは$(this).html() || $(this).remove();だけです：

_$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   $(this).html() || $(this).remove();
});

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]
_

ああ、親愛なる..しかし恐れるな！それぞれが変更したものではなく以前の構造を返します。最初のクエリが今返すものを見てみましょう。

_$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
<label class=​"radio">​…​</label>​
</div>​]
_

そしてワラ！すべてのセクシーでかわいい=）

つまり、jQueryスタイルの要素/タグ間の空白を削除する方法があります。

nJoy！

2
nickl-

何らかの理由でchromeは空白ノードのChild（）を削除したくなかったので、受け入れられた回答を少し変更しなければなりませんでした。これが発生した場合、ノードをこの例のヘルパー関数では：

 var removeWhiteSpaceNodes = function ( parent ) {
    var nodes = parent.childNodes;
    for( var i =0, l = nodes.length; i < l; i++ ){
      if( nodes[i] && nodes[i].nodeType == 3 && !/\S/.test( nodes[i].nodeValue ) ){
        parent.replaceChild( document.createTextNode(''), nodes[i]  );
      }else if( nodes[i] ){
        removeWhiteSpaceNodes( nodes[i] );
      }
    }
  }

空白を削除するノードを取得し、再帰的にはすべての空白の子を本当に空のテキストノードに置き換えます。

1
Quickredfox

使用する

$($.parseHTML(widgetHTML, document, true)).filter("*"),
0
Specc