にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

タブや全角スペースと半角スペースを相互変換する方法 [計算・変換]

入力された文字列に含まれる「全角スペース」を一括して「半角スペース2つ」と置換したり、「タブ」を一括して「半角スペース3つ」に置換したり……、JavaScriptのreplaceメソッドを使って空白文字の全角・半角を相互に変換する方法を解説。

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

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

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

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

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

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

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

JavaScriptソース

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

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

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

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

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

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

対象文字列:

結果文字列:

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

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

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

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

JavaScriptソース

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

先ほどとは逆に、

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

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

対象文字列:

結果文字列:

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

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

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

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

JavaScriptソース

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

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

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

対象文字列:

結果文字列:

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

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---