JavaScriptでURLをドット、スラッシュ、クエスチョンマークで分割

JavaScript で複数の区切り文字で文字列を分割する方法

JavaScript で文字列を分割するには、split() メソッドが一般的に使用されます。このメソッドは、文字列を指定した区切り文字で分割し、配列として返します。しかし、複数の区切り文字で分割したい場合は、デフォルトの split() メソッドだけでは不十分です。

そこで今回は、正規表現 を活用して、複数の区切り文字で文字列を分割する方法について解説します。

解説

以下のコード例は、カンマ (,) と空白 () で区切られた文字列を分割する方法を示しています。

const str = "りんご, みかん, ぶどう バナナ キウイ";
const separators = /[, ]/; // カンマと空白を区切り文字として指定
const result = str.split(separators);

console.log(result); // ["りんご", "みかん", "ぶどう", "バナナ", "キウイ"]

ポイント

• split() メソッドの引数に、正規表現オブジェクトを渡します。
• 正規表現 /[, ]/ は、カンマ (,) または空白 () のいずれかに一致するパターンを表します。
• 分割結果は以下のようになります。
  • 各区切り文字で区切られた部分ごとに、配列の要素として格納されます。
  • 空白区切りがあった場合は、空文字 ("") の要素が生成されます。

応用例

以下のコード例は、URL をドット (.)、スラッシュ (/)、クエスチョンマーク (?) で分割する方法を示しています。

const url = "https://www.example.com/path/to/file?param1=value1&param2=value2";
const separators = /[\.,/]/; // ドット、スラッシュ、クエスチョンマークを区切り文字として指定
const result = url.split(separators);

console.log(result); // ["https", "", "www", "example", "com", "path", "to", "file", "", "param1", "value1", "", "param2", "value2"]

正規表現を用いることで、柔軟かつ詳細な文字列分割が可能になります。今回紹介した方法は、複数の区切り文字で文字列を分割したい場合に役立ちます。

カンマ (,) と空白 () で区切られた文字列を分割

const str = "りんご, みかん, ぶどう バナナ キウイ";
const separators = /[, ]/; // カンマと空白を区切り文字として指定
const result = str.split(separators);

console.log(result); // ["りんご", "みかん", "ぶどう", "バナナ", "キウイ"]

const url = "https://www.example.com/path/to/file?param1=value1&param2=value2";
const separators = /[\.,/]/; // ドット、スラッシュ、クエスチョンマークを区切り文字として指定
const result = url.split(separators);

console.log(result); // ["https", "", "www", "example", "com", "path", "to", "file", "", "param1", "value1", "", "param2", "value2"]

文字列に含まれるすべての空白 () を削除

const str = "  りんご みかん  ぶどう バナナ キウイ   ";
const separators = /\s/; // 空白を区切り文字として指定
const result = str.split(separators);

console.log(result); // ["りんご", "みかん", "ぶどう", "バナナ", "キウイ"]

特定の文字列で区切られた最初の部分を抽出

const str = "ID:1234 名前:山田太郎 電話番号:090-1234-5678";
const separators = /[: ]/; // コロンと空白を区切り文字として指定
const result = str.split(separators, 2); // 分割数を2に設定

console.log(result); // ["ID", "1234", "名前", "山田太郎", "電話番号", "090-1234-5678"]

説明

• 各サンプルコードでは、split() メソッドを使用して文字列を分割しています。
• 区切り文字は、正規表現を使用して指定しています。
• サンプルコードはあくまでも一例であり、状況に応じて自由に改変できます。

JavaScript で複数の区切り文字で文字列を分割するその他の方法

String.replace() メソッドとループ

この方法は、複数の区切り文字を順番に置き換えて、最終的に空白で区切られた文字列を作成し、それを split() メソッドで分割するというものです。

const str = "りんご, みかん, ぶどう バナナ キウイ";
const separators = [", ", " "]; // 区切り文字の配列
let replacedStr = str;

for (const separator of separators) {
  replacedStr = replacedStr.replace(separator, " ");
}

const result = replacedStr.split(" ");
console.log(result); // ["りんご", "みかん", "ぶどう", "バナナ", "キウイ"]

Array.prototype.reduce() メソッド

この方法は、reduce() メソッドを使用して、文字列を区切り文字ごとに分割した部分配列を結合し、最終的な結果配列を生成する方法です。

const str = "りんご, みかん, ぶどう バナナ キウイ";
const separators = [", ", " "];
const result = str.split("").reduce((acc, char, i) => {
  if (separators.includes(str.slice(i - 1, i))) {
    acc.push([]);
  } else {
    acc[acc.length - 1].push(char);
  }
  return acc;
}, []);

console.log(result); // [["りんご"], ["みかん"], ["ぶどう"], ["バナナ"], ["キウイ"]]

サードパーティライブラリを使用する

lodash や underscore などのサードパーティライブラリには、複数の区切り文字で文字列を分割するための便利なユーティリティ関数が用意されています。

// lodash を使用する場合
const _ = require('lodash');
const str = "りんご, みかん, ぶどう バナナ キウイ";
const separators = [", ", " "];
const result = _.split(str, separators);
console.log(result); // ["りんご", "みかん", "ぶどう", "バナナ", "キウイ"]

それぞれの方法の比較

どの方法が最適かは、状況によって異なります。シンプルなケースであれば、split() メソッドと正規表現で十分でしょう。より複雑なケースや、コードの簡潔さを重視する場合は、上記の代替方法を検討するのも良いでしょう。