タブや全角スペースと半角スペースを相互変換する方法

キーボードから入力できる空白文字には、半角スペース、全角スペース、タブがあります。どれも「空白」なので見た目だけでは判別できないため、混在していても分かりません。
ワープロ文書などであれば、別にスペースが半角だろうと全角だろうと気にする必要はありませんが、プログラムのソースでは全角スペースが混入していると困ることもあります。
また、文字数から印刷幅を計算している場合など(^_^;)、半角スペースは使わずにすべて全角で書いて欲しい場合もあるかも知れません。

そんなときには、「全角スペース」と「半角スペース」を一括変換するのが便利です。

ユーザが入力した文字列に含まれる空白文字(スペースやタブなど)を、JavaScriptを使って一括変換するには、replaceメソッドと正規表現を使うのが楽です。

文字列中の「全角スペース」を「半角スペース」2つに一括変換する

まずは、すべての「全角スペース」を「半角スペース2つ」に置き換える場合です。
方法はとても簡単で、「全角スペース」が発見される度に「半角スペース2つ」に変換するよう書けば良いだけです。

例えば、変数TargetStringに格納されている文字列に対して、すべての「全角スペース」を「半角スペース2つ」に変えるには、以下のようにJavaScriptを記述すると良いでしょう。

TargetString = TargetString.replace(/　/g, "  ");

何せ空白文字の話なので、ソースを見ただけでは分からないと思いますが、

• /　/g の部分(スラッシュの内側)には全角スペースが1つあります。
• "  "); の部分(ダブルクォーテーションの内側)には半角スペースが2つあります。

文字列を格納した変数のreplaceメソッドを呼び出して、第1引数に「置換対象の文字」(ここでは全角スペース)を記述し、第2引数には「置換後の文字列」を記述しています。
第1引数の末尾にはグローバル修飾子「g」を記述しているので、対象文字列の中に全角スペースが何度登場しても、すべてが変換されます。この「g」を省略すると、最初に見つかった1つだけしか変換されないので注意して下さい。(この「g」を指定したいために、ここでは正規表現の記述方法を使っています。)

上記のようにすると、すべての「全角スペース」が「半角スペース」2つに変換されることになります。

実際に表示させてみたサンプルは以下の通り。

上記のサンプルでは、ボタンをクリックすると、入力された文字列内に含まれる「全角スペース」が一括して「半角スペース」に変換されます。(全角スペース1つが、半角スペース2つになります。)
それ以外の文字はそのままです。
見た目では変換結果が分からないと思いますので、カーソルを挿入してみるなどして、全角が半角になっていることを確認してみて下さい。

文字列中の「半角スペース」を「全角スペース」に一括変換する

なお、説明するまでもなさそうではありますが、上記とは逆に「半角スペース」を「全角スペース」に変換したい際も紹介しておきます。

例えば、変数TargetStringに格納されている文字列に対して、すべての「半角スペース」を「全角スペース」に変えるには、以下のようにJavaScriptを記述すると良いでしょう。

TargetString = TargetString.replace(/ /g, "　");

先ほどとは逆に、

• / /g の部分(スラッシュの内側)には半角スペースが1つあります。
• "　"); の部分(ダブルクォーテーションの内側)には全角スペースが1つあります。

実際に表示させてみたサンプルは以下の通り。

上記のサンプルでは、ボタンをクリックすると、入力された文字列内に含まれる「半角スペース」が一括して「全角スペース」に変換されます。
それ以外の文字はそのままです。
先のサンプルとは異なり、空白の幅が異なるので、見ただけでも置換結果が分かるでしょう。

タブを半角スペースに変換する

最後に、タブを半角スペースに変換する方法も紹介しておきます。

例えば、変数TargetStringに格納されている文字列に対して、すべての「タブ」を「半角スペース3つ」に変えるには、以下のようにJavaScriptを記述すると良いでしょう。

TargetString = TargetString.replace(/\t/g, "   ");

• /\t/g の部分(スラッシュの内側)にある「\t」とは、正規表現で「タブ」のことを指しています。
• "   "); の部分(ダブルクォーテーションの内側)には半角スペースが3つあります。

実際に表示させてみたサンプルは以下の通り。

上記のサンプルでは、ボタンをクリックすると、入力された文字列内に含まれる「タブ」が一括して「半角スペース3つ」に変換されます。
それ以外の文字はそのままです。

なお、全角・半角の区別なく、とにかく空白文字を一括して変換したい場合や、文字列の先頭や末尾にある空白文字だけを対象にしたい場合などは、別の記事「入力された文字列に含まれる空白文字を削除する」などをご参照下さい。

というわけで、全角スペースや半角スペースなどを相互に変換する方法でした。
また、JavaScriptで正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。
それらも併せてご参照下さい。

(更新日：2017年06月16日)