13

タグ間の空白を削除して、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を出すと、同じ古い文字列が表示されます。

4

5 に答える 5

28

文字列は不変であり、親要素の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フィドルデモ。

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フィドルデモ。

参照：

于 2012-08-17T23:41:25.967 に答える
22

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

  • ドキュメントの始まり
  • ドキュメントの終わり
  • >キャラクターの後
  • <文字の前

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

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

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

ソリューション：

    collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
于 2016-10-13T16:45:18.923 に答える
10

スペースのみ：

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

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

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

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

于 2013-04-09T09:35:29.660 に答える
4

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

s.replace(/\s+/g, ' ');
于 2012-08-17T23:44:20.393 に答える
0

このスレッドに出くわしたのは、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>
于 2017-02-11T17:32:35.307 に答える