jQueryで要素の中身が空か判定する正しい３つの方法

例えばこういう要素がある場合・・・

▼ 中身が空っぽの要素

<div id="empty">
  <span>    
  　　　
  </span>
</div>

<span>

</span>

</div>

ここには内部にspan要素があります。
あと中身に全角半角空白も含まれてます。

でも人間が見たときは紛れもなく中身は空。

このようなケースにおいて・・・
jQueryで厳密に要素の空判定する方法を紹介！

いくつかあるので記録に残しておきます。

このページの目次

方法１．jQueryのtrimメソッドを使うやり方
方法２．空白の正規表現で中身が空かを判定する
方法３．要素の純粋な空判定なら :empty も使える
中身が空かを判定する方法まとめ

方法１．jQueryのtrimメソッドを使うやり方

１つめは $.trim を使った判定方法

次のメソッドがjQueryにはあります。

▼ jQuery.trim() とは何か

jQuery.trim( 文字列 )
jQuery.trimメソッドは引数に設定した文字列の前後にある空白（タブや改行も含む）を削除します。途中にある空白は削除しません。IE以外のブラウザでは日本語などの2バイト文字にも対応しており、全角スペースも削除することができます（IEで利用できないので実質はNGでしょう）。

引用元　：　https://www.jquerystudy.info/reference/utilities/trim.html

このメソッドの便利なのは「改行コードや全角のブランクであっても、空白として処理」される所。中身に全角スペースがあっても空判定ができます。

実際に書いてみたコードが次です。

▼ このようなコードを書いた

$empty = $('#empty');
if($.trim($empty.text())==''){
  console.log('empty');
}

$empty = $('#empty');

if($.trim($empty.text())==''){

console.log('empty');

}

要素中身から半角全角スペース・改行・その他空白をすべて除去。その中身が '' だったら中身が空と判定できる訳ですね。コードも短く済むし、本当に簡単です。

ただし $.trim を使うと Internet Explorer でのみ全角スペースの判定ができないみたい。とはいえ「IEに何が何でも対応させたい！」という場合以外は問題ないですね。

方法２．空白の正規表現で中身が空かを判定する

２つめは自分で正規表現を書く方法

空白を判定する正規表現を自分で作ればいいです。

▼ 例えばこういうもの

/// 空白を表す正規表現
var regexp = /[\s\u{3000}]/ug;

1 2	/// 空白を表す正規表現 var regexp = /[\s\u{3000}]/ug;

まず \s が改行・半角スペースを表すのは問題ないと思います。それで全角スペースも表したいなら \u{3000} のように付け加えればＯＫ（ただしuフラグが必要）

ちなみに正規表現でのユニコードはxxxxを16進数として \u{xxxx} のように参照できます。いちいち文字のunicode16進数変換するのは面倒なので、ツールを使うのがいいかも（ツール例　：　https://so-zou.jp/web-app/text/encode-decode/）

では空白を表す正規表現が書けたので・・・

実際にこれを使って空判定してみます。

▼ 実際に書いてみたコード

var regexp = /[\s\u{3000}]/ug;
var text = $empty.text();
if(text.replace(regexp, '') == ''){
  console.log('empty')
}

var regexp = /[\s\u{3000}]/ug;

var text = $empty.text();

if(text.replace(regexp, '') == ''){

console.log('empty')

}

動かしてみたら期待通りにできました。

もし全角スペースは空判定に含めたくないなら、 /[\s]/g を使うこともできます。こちらは $.trim() と違って自分でカスタマイズできるのが利点ですね。

拡張性を考えるならコッチの方法がいいかも

方法３．要素の純粋な空判定なら :empty も使える

例えばこういう要素があります。

<div id="empty"></div>

1	<div id="empty"></div>

子要素も中身もなし、本当の意味で空の要素です。

こういう要素の空判定には :empty も使えます。

実際には次のコードで試してみました。

▼ こんなコード書いてみた

var $empty = $('#empty');
if($empty.is(':empty')){
  console.log('empty')
}

var $empty = $('#empty');

if($empty.is(':empty')){

console.log('empty')

}

単純に $empty.is(':empty') とするだけ。もし子要素も含まず、中身も改行も空白も一切ない状態なら true を返すので空判定できます。

特殊ケースだけど参考までに...

中身が空かを判定する方法まとめ

ということで簡単に箇条書きでまとめ

jQueryのtrimメソッドを使うやり方
これを使うと半角スペース・改行はもちろん、全角スペースなど空白とみなされるものを全部削除指定くれる。（ただしIEでは全角スペースは効かない模様）
空白の正規表現で中身が空かを判定する
空白の正規表現は /[\s\u{3000}]/ug と表せる。純粋な半角スペース・改行のみで判定したいときに便利なやり方。あとjQueryを使ってなくても使える
要素の純粋な空判定なら :empty もOK
中身が本当に空の要素 <div id="empty"></div> みたいなのを空判定する時はこれも使える。ただし少しでも空白やら子要素が入ってるときはダメなので要注意

一番楽なのはtrimメソッドを使ったやり方です。

他にもあるので好きな方法を使えばいいと思います。

以上、jQueryで中身空判定する方法でした。ではまた