回答編集履歴
3
jsfiddleリンク修正(アンカーテキスト)
test
CHANGED
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
|
|
139
139
|
|
|
140
140
|
|
|
141
|
-
- [a要素の子ノードにマッチさせない正規表現 - JSFiddle](http://jsfiddle.net/vgy7sL21/6/)
|
|
141
|
+
- [a要素の子孫ノードにマッチさせない正規表現 - JSFiddle](http://jsfiddle.net/vgy7sL21/6/)
|
|
142
142
|
|
|
143
143
|
|
|
144
144
|
|
2
a要素の子孫ノードにマッチさせない正規表現を追加
test
CHANGED
|
@@ -100,6 +100,12 @@
|
|
|
100
100
|
|
|
101
101
|
従って、「a要素の子孫ではないテキストノード値」という条件が必要となります。
|
|
102
102
|
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
### a要素の子ノードにマッチさせない
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
103
109
|
下記はa要素の子ノードではない場合限定の正規表現になります。
|
|
104
110
|
|
|
105
111
|
|
|
@@ -122,7 +128,71 @@
|
|
|
122
128
|
|
|
123
129
|
|
|
124
130
|
|
|
131
|
+
### a要素の子孫ノードにマッチさせない
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
**(2018/12/01 20:54追記)**
|
|
136
|
+
|
|
137
|
+
a要素の子孫ノードにマッチさせない場合は、次の正規表現を使います。
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
- [a要素の子ノードにマッチさせない正規表現 - JSFiddle](http://jsfiddle.net/vgy7sL21/6/)
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
```HTML
|
|
146
|
+
|
|
147
|
+
<div>
|
|
148
|
+
|
|
149
|
+
<section>
|
|
150
|
+
|
|
151
|
+
<span style="color:#f90">文字列</span><br>
|
|
152
|
+
|
|
153
|
+
<span style="color:#f90">文字列</span><br>
|
|
154
|
+
|
|
155
|
+
<span style="color:#f90">文字列</span><br>
|
|
156
|
+
|
|
157
|
+
#ハッシュタグ
|
|
158
|
+
|
|
159
|
+
#ハッシュタグ #ハッシュTAG#hashタグ<span style="color:#f90">文字列</span>
|
|
160
|
+
|
|
161
|
+
#ハッシュタグ
|
|
162
|
+
|
|
163
|
+
<a href="http://example.jp/#top">#top</a>
|
|
164
|
+
|
|
165
|
+
<a href="http://example.jp/#foo"><span>#foo</span></a>
|
|
166
|
+
|
|
167
|
+
</section>
|
|
168
|
+
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<script>
|
|
172
|
+
|
|
173
|
+
'use strict';
|
|
174
|
+
|
|
175
|
+
const htmlString = jQuery('div>section').html(function (i, htmlString) {
|
|
176
|
+
|
|
177
|
+
return htmlString.replace(/^[^<>]+(?=<)|>[^<>]+(?=<|$)(?!(?:</(?!a>)[^>]*>[^<]*)*</a>)/g, function (match) {
|
|
178
|
+
|
|
179
|
+
return match.replace(/(#[^\s<>]+)/g, '<a href="https://twitter.com/hashtag/javascript">$1</a>');
|
|
180
|
+
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
}).html();
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
console.log(htmlString);
|
|
188
|
+
|
|
189
|
+
</script>
|
|
190
|
+
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
125
|
-
### DOM API
|
|
195
|
+
### DOM APIでテキストノードを置換する
|
|
126
196
|
|
|
127
197
|
|
|
128
198
|
|
1
a要素の子孫ノードではない正規表現が期待通りの動作していなかったので、子ノード限定の正規表現に修正。jsfiddle追加。
test
CHANGED
|
@@ -22,6 +22,10 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
+
- [属性値にマッチさせない正規表現 - JSFiddle](http://jsfiddle.net/vgy7sL21/2/)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
25
29
|
```HTML
|
|
26
30
|
|
|
27
31
|
<div>
|
|
@@ -96,11 +100,17 @@
|
|
|
96
100
|
|
|
97
101
|
従って、「a要素の子孫ではないテキストノード値」という条件が必要となります。
|
|
98
102
|
|
|
103
|
+
下記はa要素の子ノードではない場合限定の正規表現になります。
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
- [a要素の子ノードにマッチさせない正規表現 - JSFiddle](http://jsfiddle.net/vgy7sL21/4/)
|
|
108
|
+
|
|
99
109
|
|
|
100
110
|
|
|
101
111
|
```JavaScript
|
|
102
112
|
|
|
103
|
-
const htmlString = jQuery('div>section').html().replace(/
|
|
113
|
+
const htmlString = jQuery('div>section').html().replace(/^[^<>]+(?=<(?!/a>))|>[^<>]+(?=<(?!/a>)|$)/g, function (match) {
|
|
104
114
|
|
|
105
115
|
return match.replace(/(#[^\s<>]+)/g, '<a href="https://twitter.com/hashtag/javascript">$1</a>');
|
|
106
116
|
|
|
@@ -122,6 +132,10 @@
|
|
|
122
132
|
|
|
123
133
|
|
|
124
134
|
|
|
135
|
+
- [テキストノードを置換する - JSFiddle](http://jsfiddle.net/fvxLukwo/)
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
125
139
|
```JavaScript
|
|
126
140
|
|
|
127
141
|
'use strict';
|