【基本〜事例まで解説】jQueryのsplitメソッド: 文字列を簡単に分割してみよう！
こんにちは、NNCの中里です。
Web制作で文字列を分割して扱いたいというシチュエーションがあると思います。
（例：分割した文字列を取得して条件にして処理を分けるなど）
以前にも【jQuery】特定要素内のテキストを1文字ずつ扱おう【spanで囲む】という記事を書きました。
テキストを分割して1文字ずつアニメーションさせるという内容でしたが、今回はそこで使われているjQueryのsplitメソッドの基本的な使い方についてしっかりと解説したいと思います。
jQueryのsplitメソッドとは？
splitは、文字列を指定した区切り文字で分割し、その結果を配列として取得するためのメソッドです。
カンマやスラッシュなどで区切られた文字列から、各要素を取り出す際に便利な記述です。
基本的な使い方
splitメソッドの基本文法は 文字列.split(“区切り文字”) となります。
以下は、基本的なsplitメソッドの使い方です。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上記の例では、”Apple,Orange,Banana”という文字列をカンマで分割し、appendを使用してリストグループの最後に取得した文字列をli要素として追加していくという処理になります。
for文を使用することで、各li要素に取得した文字列を一つずつ格納しています。
（for文を使用せずに処理すると、一つのli要素内に全ての文字列が格納されてしまいます）
具体例: URLを分割して処理する
以下は、Web制作でよく使われるjQueryのsplitメソッドの使用例となります。
この例では、URLからパス（Path）を抽出して利用する場面を想定しています。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
このデモでは、URL（例: https://example.com/products/category/product-name）を”/”で分割し、その結果をリストに表示しています。
（Path Part 1は/が連続して続くため空欄となっています）
また、最後の要素として製品名のみを抽出して表示しています。
このようにsplitメソッドを利用して簡単にURLを構成要素として分割でき、それぞれの要素を取り出すことができます。
デモはURLを段落の文字列で表現していますが、実務ではlocation.hrefなどを用いてURLを取得し、製品名やカテゴリ名などを抽出して条件などを作ることができそうですよね！
location.hrefでURLを取得する例
var page_url = location.href;
console.log(page_url);注意点とまとめ
- splitメソッドは文字列にのみ使用できます。
- 区切り文字が複数文字の場合は、正規表現を使用することがあります。
今回はjQueryのsplitメソッドの使い方と、よく使用されるシチュエーションの一例を紹介しました！
文字列を分割して扱うことで、様々な処理が実装しやすくなると思います。
是非活用してみてください！
