《 2:00 PM 公開/更新》
入力された文字列に含まれる「全角スペース」を一括して「半角スペース2つ」と置換したり、「タブ」を一括して「半角スペース3つ」に置換したり……、JavaScriptのreplaceメソッドを使って空白文字の全角・半角を相互に変換する方法を解説。
キーボードから入力できる空白文字には、半角スペース、全角スペース、タブがあります。どれも「空白」なので見た目だけでは判別できないため、混在していても分かりません。
ワープロ文書などであれば、別にスペースが半角だろうと全角だろうと気にする必要はありませんが、プログラムのソースでは全角スペースが混入していると困ることもあります。
また、文字数から印刷幅を計算している場合など(^_^;)、半角スペースは使わずにすべて全角で書いて欲しい場合もあるかも知れません。
そんなときには、「全角スペース」と「半角スペース」を一括変換するのが便利です。
ユーザが入力した文字列に含まれる空白文字(スペースやタブなど)を、JavaScriptを使って一括変換するには、replaceメソッドと正規表現を使うのが楽です。
まずは、すべての「全角スペース」を「半角スペース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で正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。
それらも併せてご参照下さい。
()
(前の記事) « 数値と3桁カンマ区切り文字列とを相互変換する方法
前後のJavaScript TIPS
< 旧 / 新 >
(次の記事) ユーザの入力内容をテキストエリアや配列の先頭・末尾に追加する方法 »
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)