jQueryで特定の要素の本文テキストからスペース(空白)を除去したい


たとえば「サイトのあちこちに配置された二つ並べたボタンの、

ボタンとボタンの間のスペース(隙間)をなくしたい(または統一したい)」

といったケース。

インライン要素では半角スペース、全角スペース、改行コード、 といった表記によるスペースの個数がそのまま表示に現れてしまうが、なかなかこれらの隙間の数が統一されているというケースは稀なのではなかろうか。

この例では、

「twoBtnというクラス名を持つ要素のソースコードを取得し、その文字列のなかからスペースに該当するものを''に置換する」

という記述で実現している。


$(function($){
$('.twoBtn').each(function(){
var txt = $(this).html();
txt = txt.replace(/^(%u3000|%20|%09)+| /g,'');
$(this).html(txt);
});
});

たとえば下記のようなhtmlが書かれていた場合、twoBtnの中にあるbtnAとbtnBの間の空白が消去される。


<div class="twoBtn">
<img src="btnA.png" /> <img src="btnB.png">
</div>