文字列を一文字ずつ分割する

数値を一文字ずつ分割して画像に置き換えるという処理をしたかったので、1文字ずつ分割する方法を調べてみました。

サンプルコード

まずは文字列を1文字ずつ分割してみます。

HTML

<div id="before">いろはにほへとちりぬるを</div>
<div id="after"></div>

JavaScript

// 文字列取得
var beforeText = document.getElementById('before').innerHTML;
// 文字列を一文字ずつ分割
var beforeTextArr = beforeText.split('');
// 分割したテキストを「-」で区切る
var afterText = '';
for (var i = 0; i < beforeTextArr.length; i++) {
	afterText += beforeTextArr[i] + '-';
}
// テキストの挿入
document.getElementById('after').innerHTML = afterText;

1文字ずつ分割する場合、split(”)を使用します。
文字列を1文字ずつ分割するデモページ
　

次に数値を分割する場合ですが、以下のようにすると「Uncaught TypeError: beforeText.split is not a function」とエラーがでました。

HTML

<div id="after"></div>

JavaScript

// 分割する数値
var beforeText = 123456789;
// 数値を一文字ずつ分割
var beforeTextArr = beforeText.split('');
// 分割したテキストを「-」で区切る
var afterText = '';
for (var i = 0; i < beforeTextArr.length; i++) {
	afterText += beforeTextArr[i] + '-';
}
// テキストの挿入
document.getElementById('after').innerHTML = afterText;

数値を1文字ずつ分割する失敗のデモページ

数値のままでは分割できないようなので、一旦文字列に変換してから分割するようにします。

JavaScript

// 分割する数値
var beforeText = 123456789;
// 数値を文字列に変換して、一文字ずつ分割
var beforeTextArr = String(beforeText).split('');
// 分割したテキストを「-」で区切る
var afterText = '';
for (var i = 0; i < beforeTextArr.length; i++) {
	afterText += beforeTextArr[i] + '-';
}
// テキストの挿入
document.getElementById('after').innerHTML = afterText;

数値を1文字ずつ分割することができました。
数値を1文字ずつ分割するデモページ
　

【参考サイト】

• JavaScriptで文字列を一文字ずつの配列にするにはsplit関数が使える – knt45の日記