teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問「:の後でない文字列」を探す正規表現 (JS)

編集履歴

回答編集履歴

36

テキスト修正

2018/12/02 12:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部をやってくれる、いわば一発必中の正規表現を書いてやろうという、果敢な挑戦が悪いと言っているわけではありません。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。（とはいえ、テキストノードだけを対象にして、最終的に行いたい変換まで、何から何まで全部をやってくれる、いわば一発必中の正規表現を書いてやろうという、果敢な挑戦が悪いと言っているわけではありません。）
38
38
 
39
39
 
40
40
 

35

テキスト修正

2018/12/02 12:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- この回答は、ご質問のタイトルである **「:の後でない文字列」を探す正規表現** という趣旨からは外れたものになっております。予めご了承ください。
5
+ この回答は、ご質問のタイトルである **「:の後でない文字列」を探す正規表現** という趣旨からは外れたものになっておりますので、参考程度に留めて頂ければと思います。
6
6
 
7
7
 
8
8
 

34

テキスト修正

2018/12/02 12:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部を、できるだけ少ない回数の正規表現マッチですませるように頑張ってみようという、果敢な挑戦が悪いと言っているわけではありません。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部をやってくれる、いわば一発必中の正規表現を書いてやろうという、果敢な挑戦が悪いと言っているわけではありません。）
38
38
 
39
39
 
40
40
 

33

テキスト修正

2018/12/02 07:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部、正規表現で頑張ってみようという、果敢な挑戦が悪いと言っているわけではありません。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部を、できるだけ少ない回数の正規表現マッチですませるように頑張ってみようという、果敢な挑戦が悪いと言っているわけではありません。）
38
38
 
39
39
 
40
40
 

32

テキスト修正

2018/12/02 07:11

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部、正規表現で頑張ってみようという挑戦が悪いと言っているわけではありません。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部、正規表現で頑張ってみようという、果敢な挑戦が悪いと言っているわけではありません。）
38
38
 
39
39
 
40
40
 

31

テキスト修正

2018/12/02 07:05

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -134,7 +134,7 @@
134
134
 
135
135
 
136
136
 
137
- ### 追記
137
+ ### 追記(#タグ をリンクに変換するサンプル)
138
138
 
139
139
 
140
140
 

30

テキスト修正

2018/12/02 06:41

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
 
40
40
 
41
- 以下はその一例です。
41
+ 以下は、テキストノードだけを抽出するコードの一例です。
42
42
 
43
43
 
44
44
 

29

テキスト修正

2018/12/02 06:37

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。（正規表現で頑張ることが悪いと言っているわけではないですが。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。正規表現は個々のテキストノードの文字列に対して、何らかの変換やキャプチャを行うには便利です。（※テキストノードを取ってくるという大きいくくりの検索から、最終的に行いたい細かいところの変換まで、何から何まで全部、正規表現で頑張ってみようという挑戦が悪いと言っているわけではありません。）
38
38
 
39
39
 
40
40
 

28

テキスト修正

2018/12/02 06:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
 
28
28
 
29
- - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して、replaceなどの何らかの操作を行いたいが、要素の（styleやhrefなどの）属性値に`#` で始まる文字列が含まれていても、この操作の対象外としたい。
29
+ - 与えられたHTMLに含まれる、 `#` で始まる文字列に対して、replaceなどの何らかの操作を行いたいが、この操作はテキストノードに含まれる文字列のみを対象とし、要素の（styleやhrefなどの）属性値に該当の文字列が含まれていても操作の対象外としたい。
30
30
 
31
31
 
32
32
 

27

テキスト修正

2018/12/02 06:09

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
 
156
156
 
157
- 「タグをリンクにする」ボタンをクリックすると以下のようになります。
157
+ 「タグをリンクにする」ボタンをクリックすると以下のように、 `#タグ` にリンクが付加されます。
158
158
 
159
159
 
160
160
 

26

テキスト修正

2018/12/02 06:01

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するためにJavaScriptに用意されている豊富なAPIを使った方が楽にできます。（正規表現で頑張ることが悪いと言っているわけではないですが。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するために用意されている豊富なAPIを使った方が楽にできます。（正規表現で頑張ることが悪いと言っているわけではないですが。）
38
38
 
39
39
 
40
40
 

25

テキスト修正

2018/12/02 05:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -100,7 +100,7 @@
100
100
 
101
101
 
102
102
 
103
- 上記では、 [createTreeWalker](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker) を使ってテキストノードを収集して配列として返す関数を作り、これの返り値を `textNodes`という変数に入れています。
103
+ 上記では、 [createTreeWalker](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker) を使ってテキストノードを収集して配列として返す関数`getTextNodes(root)` を作り、これの返り値を `textNodes`という変数に入れています。
104
104
 
105
105
 
106
106
 
@@ -120,15 +120,9 @@
120
120
 
121
121
 
122
122
 
123
- 上記では、テキストノードに含まれる `#ハッシュタグ` という文字列を、 `{ハッシュタグ}` にreplace しています。ここまでを動作確認するサンプルを以下に作成しました。
123
+ 上記では、テキストノードに含まれる `#ハッシュタグ` という文字列を、 `{ハッシュタグ}` にreplace しています。ここまでを動作確認するサンプルを以下に作成しました。　　　
124
-
125
- 　　　
126
124
 
127
125
  - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/sg08ru2b/2/](https://jsfiddle.net/jun68ykt/sg08ru2b/2/)
128
-
129
-
130
-
131
-
132
126
 
133
127
 
134
128
 

24

テキスト修正

2018/12/02 05:39

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- ということであると推察しました。（これが間違っているようでしたら、以下の回答は、elpha さんにとって価値のないものだと思われますので無視してください。）
33
+ ということであると推察しました。（これが間違っているようでしたら、以下の回答は、elpha さんにとって価値のないものと思われますので、無視してください。）
34
34
 
35
35
 
36
36
 

23

テキスト修正

2018/12/02 05:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードから始めることになり、それは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するためにJavaScriptに用意されている豊富なAPIを使った方が楽にできます。（正規表現で頑張ることが悪いと言っているわけではないですが。）
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードの実装から考え始めることになりますが、これは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するためにJavaScriptに用意されている豊富なAPIを使った方が楽にできます。（正規表現で頑張ることが悪いと言っているわけではないですが。）
38
38
 
39
39
 
40
40
 
@@ -130,8 +130,6 @@
130
130
 
131
131
 
132
132
 
133
- ### 追記1
134
-
135
133
 
136
134
 
137
135
  上記のコードでは、 `#` の前に `:` や `/` がある文字列、例えば `:#ハッシュタグ` や `/#ハッシュタグ` といった文字列も、これらがテキストノードに出現するのであれば、変換の対象になります。以下はそのサンプルです。
@@ -142,7 +140,7 @@
142
140
 
143
141
 
144
142
 
145
- ### 追記2
143
+ ### 追記
146
144
 
147
145
 
148
146
 

22

テキスト修正

2018/12/02 05:32

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -34,7 +34,11 @@
34
34
 
35
35
 
36
36
 
37
- 以下は、上記の解釈に基づいて、与題を実現するコードです。
37
+ 上記の解釈に基づいて、JavaScriptで与件を実現するコードを書こうとすると、まずはテキストノードだけを抽出するコードから始めることになり、それは正規表現で頑張らずとも、[DOM(Document Object Model)](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)を操作するためにJavaScriptに用意されている豊富なAPIを使った方が楽にできます。（正規表現で頑張ることが悪いと言っているわけではないですが。）
38
+
39
+
40
+
41
+ 以下はその一例です。
38
42
 
39
43
 
40
44
 
@@ -92,7 +96,19 @@
92
96
 
93
97
  const textNodes = getTextNodes(document.getElementById('outer'));
94
98
 
99
+ ```
95
100
 
101
+
102
+
103
+ 上記では、 [createTreeWalker](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker) を使ってテキストノードを収集して配列として返す関数を作り、これの返り値を `textNodes`という変数に入れています。
104
+
105
+
106
+
107
+ その後、テキストノードの配列`textNodes` の各要素に対して、何らかの処理を行います。以下はその一例です。
108
+
109
+
110
+
111
+ ```
96
112
 
97
113
  textNodes.forEach(t => {
98
114
 
@@ -102,17 +118,15 @@
102
118
 
103
119
  ```
104
120
 
121
+
122
+
123
+ 上記では、テキストノードに含まれる `#ハッシュタグ` という文字列を、 `{ハッシュタグ}` にreplace しています。ここまでを動作確認するサンプルを以下に作成しました。
124
+
105
125
  　　　
106
126
 
107
127
  - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/sg08ru2b/2/](https://jsfiddle.net/jun68ykt/sg08ru2b/2/)
108
128
 
109
129
 
110
-
111
- 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` にreplace しています。
112
-
113
-
114
-
115
- 以上、参考になれば幸いです。
116
130
 
117
131
 
118
132
 

21

テキスト修正

2018/12/02 05:26

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -132,7 +132,7 @@
132
132
 
133
133
 
134
134
 
135
- 参考までに、上記の回答に挙げたコードに機能追加して、`#タグ` をリンクに変換するサンプルを作ってみました。以下です。
135
+ 参考までに、上記の回答に挙げたコードを発展させて、`#タグ` をリンクに変換するサンプルを作ってみました。以下です。
136
136
 
137
137
 
138
138
 

20

テキスト修正

2018/12/02 05:02

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -120,7 +120,7 @@
120
120
 
121
121
 
122
122
 
123
- 上記の回答コードでは、 `#` の前に `:` や `/` がある文字列、例えば `:#ハッシュタグ` や `/#ハッシュタグ` といった文字列も、これらがテキストノードに出現するのであれば、変換の対象になります。以下はそのサンプルです。
123
+ 上記のコードでは、 `#` の前に `:` や `/` がある文字列、例えば `:#ハッシュタグ` や `/#ハッシュタグ` といった文字列も、これらがテキストノードに出現するのであれば、変換の対象になります。以下はそのサンプルです。
124
124
 
125
125
 
126
126
 

19

テキスト修正

2018/12/02 04:59

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
 
126
126
 
127
- - [https://jsfiddle.net/jun68ykt/arztwsx9/1/](https://jsfiddle.net/jun68ykt/arztwsx9/1/)
127
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/arztwsx9/1/](https://jsfiddle.net/jun68ykt/arztwsx9/1/)
128
128
 
129
129
 
130
130
 
@@ -136,7 +136,7 @@
136
136
 
137
137
 
138
138
 
139
- - [GitHub: jun68ykt/q161170/index.html](https://github.com/jun68ykt/q161170/blob/master/index.html)
139
+ - **動作確認用のサンプル：** [GitHub: jun68ykt/q161170/index.html](https://github.com/jun68ykt/q161170/blob/master/index.html)
140
140
 
141
141
 
142
142
 

18

テキスト修正

2018/12/02 04:54

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- とあったことから、質問者さまが実現したいことをより掘り下げると、
25
+ とあったことから、質問者さまが実現したいことを掘り下げると、
26
26
 
27
27
 
28
28
 
@@ -38,59 +38,73 @@
38
38
 
39
39
 
40
40
 
41
+ ```html
42
+
43
+ <div id="outer">
44
+
45
+ <section>
46
+
47
+ <span style="color:#f90">文字列</span><br>
48
+
49
+ <span style="color:#f90">文字列</span><br>
50
+
51
+ <span style="color:#f90">文字列</span><br>
52
+
53
+ #ハッシュタグ1
54
+
55
+ #ハッシュタグ2 #ハッシュTAG#hashタグ<span style="color:#f90">文字列</span>
56
+
57
+ #ハッシュタグ3
58
+
59
+ <a href="http://example.jp/#top">#ハッシュタグ4</a>
60
+
61
+ </section>
62
+
63
+ </div>
64
+
65
+ ```
66
+
41
67
  ```javascript
42
68
 
43
- function replaceTextNodeValues(htmlString, replacer) {
69
+ function getTextNodes(root) {
44
70
 
45
- var doc = new DOMParser().parseFromString(htmlString, "text/html");
71
+ const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
46
72
 
47
- var walker = doc.createTreeWalker(
73
+ const textNodes = [];
48
74
 
49
- doc,
75
+ let node;
50
76
 
51
- NodeFilter.SHOW_TEXT,
77
+ while(node = walker.nextNode()) {
52
78
 
53
- null,
79
+ if (node.nodeValue.trim().length > 0) {
54
80
 
55
- false
81
+ textNodes.push(node);
56
82
 
57
- );
83
+ }
58
84
 
59
- var node;
85
+ }
60
86
 
61
- while(node = walker.nextNode()) {
62
-
63
- node.nodeValue = replacer(node.nodeValue);
64
-
65
- }
66
-
67
- return doc.body.innerHTML;
87
+ return textNodes;
68
88
 
69
89
  }
70
90
 
71
91
 
72
92
 
93
+ const textNodes = getTextNodes(document.getElementById('outer'));
73
94
 
74
95
 
75
- var htmlBefore = $('div').html();
76
96
 
77
- var htmlAfter = replaceTextNodeValues(
97
+ textNodes.forEach(t => {
78
98
 
79
- htmlBefore,
99
+ t.nodeValue = t.nodeValue.replace(/#([^#\s]+)/g, "{$1}") ;
80
100
 
81
- str => str.replace(/#([^#\s]+)/g, "{$1}")
82
-
83
- );
101
+ });
84
-
85
- $('div').html(htmlAfter);
86
-
87
-
88
102
 
89
103
  ```
90
104
 
91
105
  　　　
92
106
 
93
- - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/wd4Lzvnj/51/](https://jsfiddle.net/jun68ykt/wd4Lzvnj/51/)
107
+ - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/sg08ru2b/2/](https://jsfiddle.net/jun68ykt/sg08ru2b/2/)
94
108
 
95
109
 
96
110
 
@@ -102,7 +116,7 @@
102
116
 
103
117
 
104
118
 
105
- ### 追記
119
+ ### 追記1
106
120
 
107
121
 
108
122
 
@@ -110,7 +124,7 @@
110
124
 
111
125
 
112
126
 
113
- - [https://jsfiddle.net/jun68ykt/85o9pmr4/4/](https://jsfiddle.net/jun68ykt/85o9pmr4/4/)
127
+ - [https://jsfiddle.net/jun68ykt/arztwsx9/1/](https://jsfiddle.net/jun68ykt/arztwsx9/1/)
114
128
 
115
129
 
116
130
 
@@ -118,7 +132,7 @@
118
132
 
119
133
 
120
134
 
121
- 参考までに、上記の回答と同じ趣旨（＝ テキストノードにある `#タグ` を変換対象にする。）で、タグをリンクに変換するサンプルを作ってみました。以下です。
135
+ 参考までに、上記の回答に挙げたコードに機能追加して、`#タグ` をリンクに変換するサンプルを作ってみました。以下です。
122
136
 
123
137
 
124
138
 

17

テキスト修正

2018/12/02 04:48

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,11 +2,15 @@
2
2
 
3
3
 
4
4
 
5
- ご質問の文章の中に
5
+ この回答は、ご質問のタイトルである **「:の後でない文字列」を探す正規表現** という趣旨からは外れたものになっております。予めご了承ください。
6
6
 
7
7
 
8
8
 
9
+ ご質問の文中に
10
+
11
+
12
+
9
- > というようなイメージで、カラーコード部分（およびリンクのURL部分）以外の「#で始まる文字列」を置換したいのですが
13
+ > （…中略…）というようなイメージで、カラーコード部分（およびリンクのURL部分）以外の「#で始まる文字列」を置換したいのですが
10
14
 
11
15
 
12
16
 
@@ -18,19 +22,19 @@
18
22
 
19
23
 
20
24
 
21
- とあったことから、質問者さまが実現したいことは、
25
+ とあったことから、質問者さまが実現したいことをより掘り下げると、
22
26
 
23
27
 
24
28
 
25
- - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたいが、要素の（styleやhrefなどの）属性値に`#` で始まる文字列が含まれていても操作の対象外としたい。
29
+ - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して、replaceなどの何らかの操作を行いたいが、要素の（styleやhrefなどの）属性値に`#` で始まる文字列が含まれていても、この操作の対象外としたい。
26
30
 
27
31
 
28
32
 
29
- ということと推察しました。（この解釈が間違っているようでしたら、以下の回答は無視してください。）
33
+ ということであると推察しました。（これが間違っているようでしたら、以下の回答は、elpha さんにとって価値のないものだと思われますので無視してください。）
30
34
 
31
35
 
32
36
 
33
- 以下は、この解釈に基づいて与件を実現するコードです。
37
+ 以下は、上記の解釈に基づいて、与題を実現するコードです。
34
38
 
35
39
 
36
40
 
@@ -84,19 +88,13 @@
84
88
 
85
89
  ```
86
90
 
87
- 　　
88
-
89
-
90
-
91
- 　
91
+ 　　　
92
92
 
93
93
  - **動作確認用のサンプル：** [https://jsfiddle.net/jun68ykt/wd4Lzvnj/51/](https://jsfiddle.net/jun68ykt/wd4Lzvnj/51/)
94
94
 
95
95
 
96
96
 
97
-
98
-
99
- 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` にreplace しています。また、ご質問の主旨を冒頭に書いたような解釈をしたために、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは外れたコードになっていることはご了承ください。
97
+ 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` にreplace しています。
100
98
 
101
99
 
102
100
 

16

テキスト修正

2018/12/02 02:00

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -132,7 +132,7 @@
132
132
 
133
133
 
134
134
 
135
- ![イメージ説明](2a52627aa49675ff3cf1298195dd642a.png)
135
+ ![イメージ説明](e0cd396e45797804a7e41726956420dc.png)
136
136
 
137
137
 
138
138
 
@@ -140,8 +140,8 @@
140
140
 
141
141
 
142
142
 
143
- ![イメージ説明](2e77b7b0b6cc646f52d7522f21b9480d.png)
143
+ ![イメージ説明](69cca03973cbba68f7794542eca803fb.png)
144
144
 
145
145
 
146
146
 
147
- なお、動作確認のため、各タグのリンク先として、[dummy image](https://dummyimage.com/) を使っています。また、初期表示の状態から、`<a>` の innerText に含まれるタグ `#161170` はリンク化の対象外にしています。
147
+ なお、動作確認のため、各タグのリンク先を Wikipedia の該当ページにしています。また、初期表示の状態から、`<a>` の innerText に含まれるタグ `#161170` はリンク化の対象外にしています。

15

テキスト修正

2018/12/01 16:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -144,4 +144,4 @@
144
144
 
145
145
 
146
146
 
147
- 各タグのリンク先として、[dummy image](https://dummyimage.com/) を使っています。また、初期表示の状態から、`<a>` の innerText に含まれるタグ `#161170` はリンク化の対象外にしています。
147
+ なお、動作確認のため、各タグのリンク先として、[dummy image](https://dummyimage.com/) を使っています。また、初期表示の状態から、`<a>` の innerText に含まれるタグ `#161170` はリンク化の対象外にしています。

14

テキスト修正

2018/12/01 15:51

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたい。したがって、要素の（styleやhrefなどの）属性値として出現する文字列は、この操作の対象外としたい。
25
+ - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたいが、要素の（styleやhrefなどの）属性値に`#` で始まる文字列が含まれていても操作の対象外としたい。
26
26
 
27
27
 
28
28
 

13

テキスト修正

2018/12/01 15:47

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
 
126
126
 
127
- - [GitHub: jun68ykt/q161170/blob/master/index.html](https://github.com/jun68ykt/q161170/blob/master/index.html)
127
+ - [GitHub: jun68ykt/q161170/index.html](https://github.com/jun68ykt/q161170/blob/master/index.html)
128
128
 
129
129
 
130
130
 

12

テキスト修正

2018/12/01 15:25

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -113,3 +113,35 @@
113
113
 
114
114
 
115
115
  - [https://jsfiddle.net/jun68ykt/85o9pmr4/4/](https://jsfiddle.net/jun68ykt/85o9pmr4/4/)
116
+
117
+
118
+
119
+ ### 追記2
120
+
121
+
122
+
123
+ 参考までに、上記の回答と同じ趣旨（＝ テキストノードにある `#タグ` を変換対象にする。）で、タグをリンクに変換するサンプルを作ってみました。以下です。
124
+
125
+
126
+
127
+ - [GitHub: jun68ykt/q161170/blob/master/index.html](https://github.com/jun68ykt/q161170/blob/master/index.html)
128
+
129
+
130
+
131
+ 上記のindex.htmlを表示すると、以下のようになります。
132
+
133
+
134
+
135
+ ![イメージ説明](2a52627aa49675ff3cf1298195dd642a.png)
136
+
137
+
138
+
139
+ 「タグをリンクにする」ボタンをクリックすると以下のようになります。
140
+
141
+
142
+
143
+ ![イメージ説明](2e77b7b0b6cc646f52d7522f21b9480d.png)
144
+
145
+
146
+
147
+ 各タグのリンク先として、[dummy image](https://dummyimage.com/) を使っています。また、初期表示の状態から、`<a>` の innerText に含まれるタグ `#161170` はリンク化の対象外にしています。

11

テキスト修正

2018/12/01 15:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
 
28
28
 
29
- ということと解釈しました。（この解釈が間違っているようでしたら、以下の回答は無視してください。）
29
+ ということと推察しました。（この解釈が間違っているようでしたら、以下の回答は無視してください。）
30
30
 
31
31
 
32
32
 

10

テキスト修正

2018/12/01 04:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- とありますので、質問者さまが実現したいことは、
21
+ とあったことから、質問者さまが実現したいことは、
22
22
 
23
23
 
24
24
 
@@ -26,9 +26,11 @@
26
26
 
27
27
 
28
28
 
29
- ということと解釈しました。
29
+ ということと解釈しました。（この解釈が間違っているようでしたら、以下の回答は無視してください。）
30
30
 
31
+
32
+
31
- 以下は、この解釈に基づいて、与件を実現するコードです。
33
+ 以下は、この解釈に基づいて与件を実現するコードです。
32
34
 
33
35
 
34
36
 

9

テキスト修正

2018/12/01 03:52

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -110,4 +110,4 @@
110
110
 
111
111
 
112
112
 
113
- - [https://jsfiddle.net/jun68ykt/85o9pmr4/3/](https://jsfiddle.net/jun68ykt/85o9pmr4/3/)
113
+ - [https://jsfiddle.net/jun68ykt/85o9pmr4/4/](https://jsfiddle.net/jun68ykt/85o9pmr4/4/)

8

テキスト修正

2018/12/01 03:42

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -110,4 +110,4 @@
110
110
 
111
111
 
112
112
 
113
- - [https://jsfiddle.net/jun68ykt/85o9pmr4/2/](https://jsfiddle.net/jun68ykt/85o9pmr4/2/)
113
+ - [https://jsfiddle.net/jun68ykt/85o9pmr4/3/](https://jsfiddle.net/jun68ykt/85o9pmr4/3/)

7

テキスト修正

2018/12/01 03:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,11 +18,11 @@
18
18
 
19
19
 
20
20
 
21
- とありますので、ご質問の主旨は、
21
+ とありますので、質問者さまが実現したいことは、
22
22
 
23
23
 
24
24
 
25
- - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたい。したがって、要素の（styleやhrefなどの）属性値として出現する文字列は、この操作の対象外とする。
25
+ - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたい。したがって、要素の（styleやhrefなどの）属性値として出現する文字列は、この操作の対象外としたい。
26
26
 
27
27
 
28
28
 

6

テキスト修正

2018/12/01 03:24

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -99,3 +99,15 @@
99
99
 
100
100
 
101
101
  以上、参考になれば幸いです。
102
+
103
+
104
+
105
+ ### 追記
106
+
107
+
108
+
109
+ 上記の回答コードでは、 `#` の前に `:` や `/` がある文字列、例えば `:#ハッシュタグ` や `/#ハッシュタグ` といった文字列も、これらがテキストノードに出現するのであれば、変換の対象になります。以下はそのサンプルです。
110
+
111
+
112
+
113
+ - [https://jsfiddle.net/jun68ykt/85o9pmr4/2/](https://jsfiddle.net/jun68ykt/85o9pmr4/2/)

5

テキスト修正

2018/12/01 03:22

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -28,9 +28,7 @@
28
28
 
29
29
  ということと解釈しました。
30
30
 
31
-
32
-
33
- ですので、以下の回答は、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは外れています。その点をあらかじめご了承ください。
31
+ 以下は、この解釈に基づいて、与件を実現するコードです。
34
32
 
35
33
 
36
34
 
@@ -96,7 +94,7 @@
96
94
 
97
95
 
98
96
 
99
- 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` にreplace しています。
97
+ 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` にreplace しています。また、ご質問の主旨を冒頭に書いたような解釈をしたために、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは外れたコードになっていることはご了承ください。
100
98
 
101
99
 
102
100
 

4

テキスト修正

2018/12/01 02:57

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,11 +18,11 @@
18
18
 
19
19
 
20
20
 
21
- とありましたので、ご質問の主旨は
21
+ とありますので、ご質問の主旨は、
22
22
 
23
23
 
24
24
 
25
- - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたい。したがって、（style や href などの）属性の値として出現する文字列は操作の対象外とする。
25
+ - 与えられたHTMLのテキストノードに含まれる、 `#` で始まる文字列に対して（replaceなどの）何らかの操作を行いたい。したがって、要素の（styleやhrefなどの）属性値として出現する文字列は、この操作の対象外とする。
26
26
 
27
27
 
28
28
 
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- ですので、以下の回答は、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは外れていると思われますので、あくまで参考程度に眺めて頂ければと思います。
33
+ ですので、以下の回答は、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは外れています。その点をあらかじめご了承ください。
34
34
 
35
35
 
36
36
 

3

テキスト修正

2018/12/01 02:52

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -96,9 +96,7 @@
96
96
 
97
97
 
98
98
 
99
- 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` に
99
+ 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` にreplace しています。
100
-
101
- replace しています。
102
100
 
103
101
 
104
102
 

2

テキスト修正

2018/12/01 02:43

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- ですので、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは、若干離れた回答になるので、あくまで参考程度に眺めて頂ければと思います。
33
+ ですので、以下の回答は、ご質問のタイトルである、 **「:の後でない文字列」を探す正規表現** からは外れていると思われますので、あくまで参考程度に眺めて頂ければと思います。
34
34
 
35
35
 
36
36
 

1

テキスト修正

2018/12/01 02:40

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,23 @@
2
2
 
3
3
 
4
4
 
5
+ ご質問の文章の中に
6
+
7
+
8
+
9
+ > というようなイメージで、カラーコード部分（およびリンクのURL部分）以外の「#で始まる文字列」を置換したいのですが
10
+
11
+
12
+
13
+ とあり、特に上記の中に
14
+
15
+
16
+
17
+ > およびリンクのURL部分
18
+
19
+
20
+
5
- 以下の回答は、ご質問の要件を、
21
+ とありましたので、ご質問の主旨は
6
22
 
7
23
 
8
24
 
@@ -10,7 +26,7 @@
10
26
 
11
27
 
12
28
 
13
- ということと解釈しての回答になります。
29
+ ということと解釈しました。
14
30
 
15
31
 
16
32
 
@@ -80,7 +96,9 @@
80
96
 
81
97
 
82
98
 
83
- 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を `{ハッシュタグ}` に replace しています。
99
+ 上記のコードでは、テキストノードに含まれる `#ハッシュタグ` という文字列を、例として `{ハッシュタグ}` に
100
+
101
+ replace しています。
84
102
 
85
103
 
86
104