web-dev-qa-db-ja.com

JavaScriptを使用してタグ間のすべての空白を削除します

タグ間の空白を削除して、childNodeにそれらのタグノードのみが含まれ、空白ノードも含まれないようにしようとしています。これが私のコードです：

<li>            
    <label for="firstName"  class="mainLabel">First Name : </label>                                 
    <input type="text" name="firstName" id="firstName"/>                                    
    <span>This must be filled</span>
</li>

そしてここにJSコードがあります：

var parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\n</g,"><");
firstName.parentNode.innerHTML = parentHTML;

しかし、parentHTMLに警告すると、同じ古い文字列が表示されます。

javascriptregexwhitespace
11
Rafael Adel

文字列は不変であり、親要素のinnerHTMLを、以前に取得した文字列とまったく同じ文字列に設定しているためです（ルールの後で参照してください）。

代わりに、私は提案します：

var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstname.parentNode.innerHTML,
    newHTML = parentHTML.replace(/\>\s+\</g,'');
firstname.parentNode.innerHTML = newHTML;

console.log(parentHTML, newHTML, (parentHTML == newHTML));

JS Fiddle demo 。

Jfriend00（下記）からのコメントに関しては、正規表現が問題だったようです、\n提供されたパターンと一致しませんでした。その場合、次の修正は要件を満たします。

var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\s+</g, "><");
firstName.parentNode.innerHTML = parentHTML;

console.log(firstname, parentHTML);​

JS Fiddle demo 。

参照：

22
David says reinstate Monica

ほとんどの場合、次の場所からスペースを削除することをお勧めします。

  • ドキュメントの始まり
  • ドキュメントの終わり
  • >文字の後
  • <文字の前

これがあなたの望むことをしないと私が考えることができる2つのケースがあります、そしてこれらは上記のそれほど攻撃的でない解決策に影響を与える同じ2つのケースです。

  • inline-block要素間の空のスペースは、実際にはレイアウトの意図された部分または予想される部分です。このスペースがゼロ文字に折りたたまれている場合、要素間の暗黙のスペースは削除されます。これは、以下の正規表現を" "に置き換えることで回避できます。

  • 私の元の回答は、<script>、<style>、<pre>、または<textarea>タグの空白を保持するように更新されました。 <pre>を除くこれらはすべてCDATAであり、コンテンツがHTMLではないことを意味し、終了タグが見つかるまで解析されます。これは、正規表現が完全なソリューションであることを意味します。 <pre>がネストされているか、white-space CSSプロパティが使用されている場合、これはコンテンツを保持しません。

ソリューション：

    collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
17
Adam Leggett

スペースのみ：

parentHTML = parentHTML.replace( new RegExp( "\>[ ]+\<" , "g" ) , "><" );

新しい行、タブ、スペース：

parentHTML = parentHTML.replace( new RegExp( "\>[\s]+\<" , "g" ) , "><" );

https://regex101.com/r/sD7cT8/1

10
Joeri

Htmlタグをjsの文字列として扱うことはできますか？私はそれができると思います。これを試して！

s.replace(/\s+/g, ' ');
3
ln2khanal

このスレッドに出くわしたのは、HTMLソースの空白、または私の場合は改行によって引き起こされるdivの周りのギャップを排除するための解決策を探していたためです。

空白がこれらのギャップを引き起こす可能性があることに気付く前に、私はそれらを取り除くために気が狂っていました。 HTMLソースを読みやすいようにフォーマットしたままにしておきたいので、コードを圧縮することは私にとって良い解決策ではありません。このように扱っても、Googleや他のベンダーによって生成されたdivは修正されません。

まず、次の関数を作成し、bodyonloadで呼び出します。

function Compress_Html() {
    //Remove whitespace between html tags to prevent gaps between divs.
    document.body.innerHTML = document.body.innerHTML.replace( /(^|>)\s+|\s+(?=<|$)/g, "$1" );
}

これは完璧に機能しているように見えましたが、残念ながら、フッターにあるGoogle検索ボックスが壊れています。

成功せずに正規表現パターンの多くのバリエーションを試した後、私はこの正規表現テスターを http://www.regexpal.com/ で見つけました。私の知る限り、次のパターンが必要なことを実行します。

( /(^|>)[ \n\t]+/g, ">" )

そうは言っても、関数はまだ検索ボックスを壊していました。それで、私はそれをjQueryドキュメントレディ関数に移動することになりました。これで機能し、検索ボックスが壊れることはありません。

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).ready(function() {
        document.body.innerHTML = document.body.innerHTML.replace( /(^|>)[ \n\t]+/g, ">" );
    });
</script>
0
MFM