JavaScriptで文字列を最初の指定文字で分割する方法：split vs substr/substring/slice

2024-04-02

JavaScript、jQuery、正規表現を用いて文字列を最初の指定文字で分割する

この解説では、JavaScript、jQuery、正規表現を用いて、文字列を最初の指定文字でのみ分割する方法を紹介します。

// JavaScript

// 例1：カンマで区切られた文字列を最初のカンマで分割
const str = "JavaScript, jQuery, 正規表現";
const parts = str.split(",", 1);
console.log(parts); // ["JavaScript", "jQuery, 正規表現"]

// 例2：正規表現を用いて最初のスペースで分割
const str = "JavaScript   入門";
const parts = str.split(/\s+/, 1);
console.log(parts); // ["JavaScript", "入門"]

// jQuery

// 例3：カンマで区切られた文字列を最初のカンマで分割
const str = "JavaScript, jQuery, 正規表現";
const parts = str.split(",", 1);
console.log(parts); // ["JavaScript", "jQuery, 正規表現"]

// 例4：正規表現を用いて最初のスペースで分割
const str = "JavaScript   入門";
const parts = str.split(/\s+/, 1);
console.log(parts); // ["JavaScript", "入門"]

解説

JavaScript

split() メソッドは、文字列を指定された文字列で分割し、配列を返します。
第1引数に区切り文字、第2引数に分割数を指定します。
例1では、カンマ（","）を区切り文字、1 を分割数として指定することで、最初のカンマで分割しています。
例2では、正規表現 /\s+/ を用いて、1つ以上の空白文字で分割しています。

jQuery

jQuery の split() メソッドは、JavaScript の split() メソッドとほぼ同じように動作します。
例3、4は JavaScript の例1、2と同様の処理を行っています。

正規表現

正規表現は、文字列のパターンを抽出するために用いることができます。
例2では、/\s+/ という正規表現を用いて、1つ以上の空白文字 () にマッチしています。

ポイント

分割数を 1 に指定することで、最初の指定文字でのみ分割できます。
正規表現を用いることで、より複雑なパターンで分割することができます。

上記以外にも、様々な方法で文字列を分割することができます。詳細は以下の資料を参照してください。

// 例1：カンマで区切られた文字列を最初のカンマで分割
const str = "JavaScript, jQuery, 正規表現";
const parts = str.split(",", 1);
console.log(parts); // ["JavaScript", "jQuery, 正規表現"]

// 例2：正規表現を用いて最初のスペースで分割
const str = "JavaScript   入門";
const parts = str.split(/\s+/, 1);
console.log(parts); // ["JavaScript", "入門"]

// 例3：文字列の先頭から最初のスペースまでを抽出
const str = "JavaScript 入門";
const part = str.split(" ", 1)[0];
console.log(part); // "JavaScript"

// 例4：文字列の末尾から最初のカンマまでを抽出
const str = "JavaScript, jQuery, 正規表現";
const part = str.split(",").reverse()[0];
console.log(part); // "正規表現"

// 例5：カンマで区切られた文字列を最初のカンマで分割
const str = "JavaScript, jQuery, 正規表現";
const parts = str.split(",", 1);
console.log(parts); // ["JavaScript", "jQuery, 正規表現"]

// 例6：正規表現を用いて最初のスペースで分割
const str = "JavaScript   入門";
const parts = str.split(/\s+/, 1);
console.log(parts); // ["JavaScript", "入門"]

// 例7：文字列の先頭から最初のスペースまでを抽出
const str = "JavaScript 入門";
const part = str.split(" ", 1)[0];
console.log(part); // "JavaScript"

// 例8：文字列の末尾から最初のカンマまでを抽出
const str = "JavaScript, jQuery, 正規表現";
const part = str.split(",").reverse()[0];
console.log(part); // "正規表現"

上記のサンプルコードは、以下の内容を示しています。

例1、2、5、6: split() メソッドを用いて、最初の指定文字で文字列を分割しています。
例3、7: split() メソッドと配列のインデックスを用いて、文字列の先頭から最初のスペースまでを抽出しています。

文字列を最初の指定文字で分割する他の方法

substr() / substring() / slice() メソッド

// 例1：カンマで区切られた文字列を最初のカンマで分割
const str = "JavaScript, jQuery, 正規表現";
const part = str.substr(0, str.indexOf(","));
console.log(part); // "JavaScript"

// 例2：正規表現を用いて最初のスペースで分割
const str = "JavaScript   入門";
const part = str.substring(0, str.search(/\s+/));
console.log(part); // "JavaScript"

// 例3：文字列の先頭から最初のスペースまでを抽出
const str = "JavaScript 入門";
const part = str.slice(0, str.indexOf(" "));
console.log(part); // "JavaScript"

substr()、substring()、slice() メソッドは、文字列の部分文字列を取得するために用いることができます。
例1、2、3では、これらのメソッドを用いて、文字列の先頭から最初の指定文字までの部分文字列を取得しています。

注意点

substr()、substring() メソッドは、非推奨となっています。代わりに slice() メソッドを用いることを推奨します。
slice() メソッドは、第2引数に省略記号 (...) を指定することで、文字列の末尾までを取得することができます。

for ループ

// 例4：カンマで区切られた文字列を最初のカンマで分割
const str = "JavaScript, jQuery, 正規表現";
let part = "";
for (let i = 0; i < str.length; i++) {
  if (str[i] === ",") {
    break;
  }
  part += str[i];
}
console.log(part); // "JavaScript"