数字が含まれた文字列から「数字の前」「数字」「数字の後」を取り出したい

Question

例

あなたは30日間ログインしていません

これを「あなたは」「30」「日間ログインしていません」に分割したいです。
数字は可変です。

詳細

実際の実装では数値だけに下線やリンクをつけたいです。
propsで渡された文字列の中に数値が存在している場合のみ分割して、独自のタグを付与する予定です。

目指したいコード

const message = 'あなたは30日間ログインしていません';
const divide = message.関数

<div>{divide[0]}<span>{divide[1]}</span>{divide[3]}</div>

Answer 1

分けたいのが「数字以外で構成された部分」「数字のみで構成された部分」「数字以外で構成された部分」
ということであれば、正規表現で

([^0-9]*)([0-9]+)([^0-9]*)

に合致する文字列と言うことになるでしょうから、
あとは JavaScript の RegExp を使って処理しましょう。
※match の結果がnullになるのであれば、それは「数字の部分がない文字列」であることを示すので、いかようにでも対応できるはずです

Answer 2

要件定義をしっかり行ってから作ります。

• 数字が複数ある場合
• 数字で始まる場合
• 数字が存在しない場合

'use strcit';
console.log('あなたは30日間ログインしていません'.match(/\d+|\D+/g)); // ["あなたは", "30", "日間ログインしていません"]
console.log('最終ログイン日時は2018年7月25日です'.match(/\d+|\D+/g)); // ["最終ログイン日時は", "2018", "年", "7", "月", "25", "日です"]
console.log('2018年7月25日'.match(/\d+|\D+/g));  // ["2018", "年", "7", "月", "25", "日"]
console.log('今回が初めてのログインです'.match(/\d+|\D+/g)); // ["今回が初めてのログインです"]

console.log('あなたは30日間ログインしていません'.split(/(\d+)/)); // ["あなたは", "30", "日間ログインしていません"]
console.log('最終ログイン日時は2018年7月25日です'.split(/(\d+)/)); // ["最終ログイン日時は", "2018", "年", "7", "月", "25", "日です"]
console.log('2018年7月25日'.split(/(\d+)/));  // ["2018", "年", "7", "月", "25", "日"]
console.log('今回が初めてのログインです'.split(/(\d+)/)); // ["今回が初めてのログインです"]

Re: parapa さん

Comments

[katoy]

エース網羅としては 少なくも 9 ケースあると思います。
s: String, d: 数字列 として列挙します。
1. s d s
2. s d
3. d s
4. d
5. s
6. s d s d
7. d s d
8. s d s d s
9. 空文字

[think49]

あげて頂いたケースの中では、空文字が考慮に入っていませんでした。
"".match(/\d+|\D+/g); // null
"".split(/(\d+)/); // [""]
後続処理次第ですが、当初の目的「数値が存在している場合のみ分割して、独自のタグを付与する予定」を振り返ってみると、string.replace(/\d+/g, () => {}) や createDocumentFragment 採用に方針転換しそうです。

Answer 3

数字が1箇所にしかでてこないならこれで

const message = 'あなたは30日間ログインしていません';
const matches=message.match(/(^.+?)(\d+)(.+$)/);
console.log(matches[1]);
console.log(matches[2]);
console.log(matches[3]);

Answer 4

... 数値が存在している場合のみ分割して、独自のタグを付与する予定です。 ...

それがゴールなら、文字列を分割するしなくでもできるとおもいます。

正規表現で 数字文字列をみつけて、それを
<span class=number>数字文字列</span>
などに文字列置換すれば良いです。

参考情報

• JavaScriptの正規表現 各メソッド

https://qiita.com/mokoaki/items/4740c9bd921d2b8d3d82

Comments

[parapa]

なるほど！
html(message.match(/\d+|\D+/g))
といった感じでしょうか？
試してみます

[katoy]

数字 の定義もはっきりさせておくとよいです。
-1 や +1 といった符号付き数字はどうするか？
1.23のような小数はどうあつかうか？
0xFFF や 0x123 のような１０進以外の表記はどう扱うか？
1,234 のような 3 桁区切り表記の数字はどうあつかうか？
(入力とてありえないから処理は考慮しないのか、これらも処理できるようにするのか)