回答編集履歴
2
入力文字列に改行コード後の半角スペースが抜けていたのを修正
test
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
### String.prototype.replace
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
要件にはありませんが、期待する置換結果を見る限りでは
|
|
2
6
|
|
|
3
7
|
**空白文字のみのテキストを読み飛ばす条件**があるようですね。
|
|
4
8
|
|
|
9
|
+
何度も置換処理を走らせると想定外の状況が生まれて意図せぬマッチが発生しやすいので、一度の置換処理にまとめると良いと思います。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
5
|
-
https://jsfiddle.net/hb7agerh/
|
|
13
|
+
- [テキストノード部の文字列を<span>で括る - JSFiddle](https://jsfiddle.net/hb7agerh/2/)
|
|
6
14
|
|
|
7
15
|
|
|
8
16
|
|
|
@@ -10,14 +18,24 @@
|
|
|
10
18
|
|
|
11
19
|
'use strict';
|
|
12
20
|
|
|
13
|
-
var text = '例によって金田邸へ忍び込む。<br>\r\n<em class="sesame_dot">例によって</em>とは<ruby><rb>今更</rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby>解釈する必要もない。';
|
|
21
|
+
var text = '例によって金田邸へ忍び込む。<br>\r\n <em class="sesame_dot">例によって</em>とは<ruby><rb>今更</rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby>解釈する必要もない。';
|
|
14
22
|
|
|
15
23
|
|
|
16
24
|
|
|
17
25
|
text = text.replace(/(^|>)(?!\s+(?:<|$))([^<]+)(?=<(?!\/r(?:[pt]|uby)>)|$)/g, '$1<span class="my_color">$2</span>');
|
|
18
26
|
|
|
27
|
+
console.log(text); // <span class="my_color">例によって金田邸へ忍び込む。</span><br>\r\n <em class="sesame_dot"><span class="my_color">例によって</span></em><span class="my_color">とは</span><ruby><rb><span class="my_color">今更</span></rb><rp>（</rp><rt>いまさら</rt><rp>）</rp></ruby><span class="my_color">解釈する必要もない。</span>
|
|
28
|
+
|
|
19
29
|
```
|
|
20
30
|
|
|
21
31
|
|
|
22
32
|
|
|
33
|
+
### 更新履歴
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
- 2017/01/28 19:39 入力文字列に改行コード後の半角スペースが抜けていたのを修正
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
23
41
|
Re: hikochang さん
|
1
br要素の処理を読み違えていたので文面修正
test
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
要件にはありませんが、期待する置換結果を見る限りでは
|
|
2
2
|
|
|
3
3
|
**空白文字のみのテキストを読み飛ばす条件**があるようですね。
|
|
4
|
-
|
|
5
|
-
(br要素の置換処理は簡単なので除外しました。適宜追加処理を入れてください。)
|
|
6
4
|
|
|
7
5
|
https://jsfiddle.net/hb7agerh/
|
|
8
6
|
|