BabelとUnicode正規表現で最新JavaScript機能を古いブラウザで利用する

JavaScriptでUnicode対応正規表現を使用する方法

uフラグを使用する

最も簡単な方法は、正規表現リテラルまたはRegExpコンストラクタにuフラグを指定することです。

// 例1: 正規表現リテラル
const regex = /𠮷/u;

// 例2: RegExpコンストラクタ
const regex = new RegExp("𠮷", "u");

uフラグを設定すると、以下の効果があります。

• 文字列がUnicodeコードポイントのシーケンスとして解釈されます。
• Unicodeプロパティエスケープを使用できます。
• スクリプトの境界が考慮されます。

String.prototype.matchAllを使用する

String.prototype.matchAllメソッドは、Unicode対応正規表現を使用して、文字列内のすべてのマッチング部分文字列を見つけることができます。

const str = "𠮷野家";
const matches = str.matchAll(/𠮷/u);

for (const match of matches) {
  console.log(match[0]); // "𠮷"
}

Unicodeプロパティエスケープを使用すると、特定のUnicode文字プロパティを持つ文字にマッチさせることができます。

// 例1: 日本語文字にマッチ
const regex = /[^\p{Script=Latin}]/u;

// 例2: 数字にマッチ
const regex = /\p{Number}/u;

// 例1: 日本語の𠮷にマッチ
const regex = /𠮷/u;
const str = "𠮷野家";

console.log(regex.test(str)); // true

// 例2: スクリプト境界を考慮
const regex = /\p{Script=Latin}/u;
const str = "𠮷A";

console.log(regex.test(str)); // false

const str = "𠮷野家";
const matches = str.matchAll(/𠮷/u);

for (const match of matches) {
  console.log(match[0]); // "𠮷"
}

// 例1: 日本語文字にマッチ
const regex = /[^\p{Script=Latin}]/u;
const str = "𠮷野家";

console.log(regex.test(str)); // true

// 例2: 数字にマッチ
const regex = /\p{Number}/u;
const str = "123𠮷";

console.log(regex.test(str)); // true

• 上記のコードは、あくまでもサンプルです。
• 使用する前に、uフラグとUnicodeプロパティエスケープのサポート状況を確認する必要があります。

js-regexやpcre.jsなどの正規表現ライブラリは、JavaScript標準の正規表現機能よりも多くの機能を提供しており、Unicode対応正規表現も簡単に使用できます。

Babelを使用する

BabelはJavaScriptのコンパイラであり、uフラグやUnicodeプロパティエスケープなどの新しいJavaScript機能を古いブラウザで動作させることができます。

Polyfillを使用する

unicode-matchやunicode-regexなどのPolyfillを使用すると、古いブラウザでもUnicode対応正規表現を使用することができます。

各方法の比較