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>