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>