JavaScriptで文字列内の任意の文字を置き換える方法｜正規表現とreplace()の使い方

この記事では、正規表現（RegEx）とreplace()メソッドを組み合わせて、JavaScriptで文字列内の任意の文字を置き換える方法を解説します。

問題となるシーン

たとえば、テキストの中でダッシュ（—）を使うつもりだったのに、うっかりハイフン（-）を入力してしまったとしましょう。

const textBlock =
  "When you’re typing fast it’s normal to make a few spelling mistakes here and there - it just means you’re human."

素早くタイピングしていると、こうした記号の打ち間違いは誰にでも起こりえます。幸い、JavaScriptの正規表現とreplace()メソッドを使えば、この問題は簡単に修正できます。

正規表現とreplace()メソッドで置き換える

const textBlockCorrected = textBlock.replace(/-/g, "—")

console.log(textBlockCorrected)
// "When you’re typing fast it’s normal to make a few spelling mistakes here and there — it just means you’re human."

ここでポイントになるのが、正規表現の末尾にあるgフラグです。gは「global（グローバル）」の略で、これを付けることで文字列内のすべての該当箇所が置き換えられます。フラグを付け忘れると、最初に一致した1箇所しか置き換えられないので注意してください。

置き換え結果を確認する

一見すると、置き換え前後で同じように見えるかもしれません。しかし実際には、ハイフン（-）とダッシュ（—）はまったく別の記号です。よく見ると長さが異なります。

確信が持てない場合は、textBlockとtextBlockCorrectedの出力結果を並べて表示してみましょう。違いがよりはっきりと確認できます。

console.log(textBlock)
// "When you’re typing fast it’s normal to make a few spelling mistakes here and there - it just means you’re human."

console.log(textBlockCorrected)
// "When you’re typing fast it’s normal to make a few spelling mistakes here and there — it just means you’re human."

補足：フォントによって見え方が変わる

なお、タイポグラフィの観点から言うと、コード例で使用しているMenloのような等幅（モノスペース）フォントではなく、通常のプロポーショナルフォントで表示したほうが、文字や記号の違いは格段に見分けやすくなります。

emダッシュ、enダッシュ、ハイフンといった記号の違いについての詳細は、タイポグラフィに特化したチュートリアルで改めて解説する予定です。