teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptによる文字列置換

編集履歴

回答編集履歴

7

typo修正

2019/11/02 16:42

投稿

think49
think49

スコア18166

test CHANGED
@@ -156,7 +156,7 @@
156
156
 
157
157
  `"World"` と `"JavaScript"` の文字列長は異なるので、**可変長**の置換を期待しています。
158
158
 
159
- 何が問題かというと、1回目の置換跡に2回目の置換処理を実行する場合、**文字列長が変わるとインデックス値もずれる**のです。
159
+ 何が問題かというと、1回目の置換後に2回目の置換処理を実行する場合、**文字列長が変わるとインデックス値もずれる**のです。
160
160
 
161
161
  これは2つの解決法があります。
162
162
 

6

複数の範囲指定に対応する

2019/11/02 16:42

投稿

think49
think49

スコア18166

test CHANGED
@@ -106,4 +106,116 @@
106
106
 
107
107
 
108
108
 
109
+ ### 複数の範囲指定に対応する
110
+
111
+
112
+
113
+ > 置き換えたい文字列が全体に複数ある場合に対応するため、また、全体の文字列もある程度規則性があり、置換の開始位置はそうそう変わらないので「文字列の◯番目から△番目を置換する」という方法を取りたかったのです。
114
+
115
+
116
+
117
+ 置換する範囲が複数ある場合、効率化の為には複数をまとめて**一括置換**する必要があり、回答の方向性が大きく変わります。
118
+
119
+ 今までに出てきた回答は全て**一つの範囲を置換するコード**であり、要件を満たしていません。
120
+
121
+
122
+
123
+ - [replace-by-index.js: 指定したインデックス範囲の文字列を置換](https://gist.github.com/think49/3f6e788c02d4983b82173f7ae4c9df9d)
124
+
125
+
126
+
127
+ ```JavaScript
128
+
129
+ replaceByIndex('ABC', [0, 1, 'AAA'], [1, 1, 'BBB'], [2, 1, 'CCC']); // "AAABBBCCC"
130
+
131
+ ```
132
+
133
+
134
+
135
+ 課題となるのは、置換元/置換先の文字列長が同値かどうか、です。
136
+
137
+
138
+
139
+ > ```JavaScript
140
+
141
+ > var str = "Hello,World!";
142
+
143
+ > console.log(str);
144
+
145
+ > var str_1 = str.substr(0, 6) //"Hello"を切り出し
146
+
147
+ > var str_2 = str.substr(11, 1); //"!"を切り出し
148
+
149
+ > str = str_1 + "Japan" +　str_2;
150
+
151
+ > console.log(str); //“Hello,Japan!”と出力
152
+
153
+ > ```
154
+
155
+
156
+
157
+ `"World"` と `"JavaScript"` の文字列長は異なるので、**可変長**の置換を期待しています。
158
+
159
+ 何が問題かというと、1回目の置換跡に2回目の置換処理を実行する場合、**文字列長が変わるとインデックス値もずれる**のです。
160
+
161
+ これは2つの解決法があります。
162
+
163
+
164
+
165
+ - 置換前後の文字列長の差分をとって、インデックス値を補正する
166
+
167
+ - 常に「置換前の文字列」から文字列を切り出す
168
+
169
+
170
+
171
+ replace-by-index.js では後者を採用しました。
172
+
173
+
174
+
175
+ ---
176
+
177
+
178
+
179
+ なお、既に置換されている範囲を何度も検索してしまう非効率性は `String#slice` を使用する関係上、無視しています。
180
+
181
+ 置換元文字列を slice で切り出せば対応可能ですが、インデックス値も補正しなければならず、諸々の補正処理を全て実行すると、パフォーマンスが落ちる可能性がありました(実験してはいないので、興味があれば検証してみて下さい)。
182
+
183
+
184
+
185
+ `String#replace` で正規表現指定する方法を採用すれば、1回ずつしか消費されない為、この問題に対応できます。
186
+
187
+ 正規表現を動的生成し、一度に置換すれば要件を達成できるでしょう。
188
+
189
+ `[\s\S]` は効率が良いとはいえない為、`s` フラグを実装しているブラウザのみで問題がなければ、ですが。
190
+
191
+
192
+
193
+ ### 実行速度の確認
194
+
195
+
196
+
197
+ 「理論値」と「実測値」が異なる事は往々にしてあります。
198
+
199
+ 今回、回答するにあたって実測値を基にしてはいない為、是非、実測して確認してみてください。
200
+
201
+
202
+
203
+ - [実行の測定とカウント  \|  Tools for Web Developers  \|  Google Developers](https://developers.google.com/web/tools/chrome-devtools/console/track-executions?hl=ja)
204
+
205
+
206
+
207
+ ### 質問の仕方について
208
+
209
+
210
+
211
+ 追加条件でコードの難易度が格段に上がりました。
212
+
213
+ 回答の練り直しも余儀なくされましたので、今後は質問文に全ての条件を書くようにしてください。
214
+
215
+ また、補足要求を受けて追加情報は質問を [編集] して、質問文に追記してください。
216
+
217
+ 全てのコメントを読んで質問の全容を読み取るのはそれなりに労力がかかります。
218
+
219
+
220
+
109
221
  Re: Y.NINOMIYA さん

5

不要なgフラグを削除、^ を追加

2019/11/02 16:29

投稿

think49
think49

スコア18166

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- 一応、正規表現を駆使すれば、ひとつのメソッドで実現は可能です。
25
+ 一応、正規表現を駆使すれば、一つのメソッドで実現は可能です。
26
26
 
27
27
 
28
28
 
@@ -34,7 +34,7 @@
34
34
 
35
35
  */
36
36
 
37
- 'Hello, World!'.replace(/([\s\S]{7})[\s\S]{5}/g, '$1JavaScript'); // "Hello, JavaScript!"
37
+ 'Hello, World!'.replace(/^([\s\S]{7})[\s\S]{5}/, '$1JavaScript'); // "Hello, JavaScript!"
38
38
 
39
39
 
40
40
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  */
46
46
 
47
- 'Hello, World!'.replace(/(?<=.{7}).{5}/gs, 'JavaScript'); // "Hello, JavaScript!"
47
+ 'Hello, World!'.replace(/(?<=^.{7}).{5}/s, 'JavaScript'); // "Hello, JavaScript!"
48
48
 
49
49
  ```
50
50
 
@@ -86,7 +86,7 @@
86
86
 
87
87
 
88
88
 
89
- キャッシュ付き関数
89
+ ユーザ定義関数(テキストノードをキャッシュ)
90
90
 
91
91
 
92
92
 

4

キャッシュ付き関数

2019/11/01 10:10

投稿

think49
think49

スコア18166

test CHANGED
@@ -82,7 +82,25 @@
82
82
 
83
83
  text.data; // "Hello, JavaScript!"
84
84
 
85
+ ```
85
86
 
87
+
88
+
89
+ キャッシュ付き関数
90
+
91
+
92
+
93
+ ```JavaScript
94
+
95
+ const replaceData = (text =>
96
+
97
+ (string, offset, count, data) => (text.data = string, text.replaceData(offset, count, data), text.data)
98
+
99
+ )(new Text);
100
+
101
+
102
+
103
+ replaceData('Hello, World!', 7, 5, 'JavaScript');
86
104
 
87
105
  ```
88
106
 

3

; 付け忘れ

2019/10/31 13:21

投稿

think49
think49

スコア18166

test CHANGED
@@ -78,9 +78,11 @@
78
78
 
79
79
  const text = new Text('Hello, World!');
80
80
 
81
- text.replaceData(7, 5, 'JavaScript')
81
+ text.replaceData(7, 5, 'JavaScript');
82
82
 
83
83
  text.data; // "Hello, JavaScript!"
84
+
85
+
84
86
 
85
87
  ```
86
88
 

2

CharacterData.prototype.replaceData

2019/10/31 12:53

投稿

think49
think49

スコア18166

test CHANGED
@@ -66,4 +66,24 @@
66
66
 
67
67
 
68
68
 
69
+ ### CharacterData.prototype.replaceData
70
+
71
+
72
+
73
+ DOM APIに目的の関数があるようですね。
74
+
75
+
76
+
77
+ ```JavaScript
78
+
79
+ const text = new Text('Hello, World!');
80
+
81
+ text.replaceData(7, 5, 'JavaScript')
82
+
83
+ text.data; // "Hello, JavaScript!"
84
+
85
+ ```
86
+
87
+
88
+
69
89
  Re: Y.NINOMIYA さん

1

ES2019 正規表現の修正

2019/10/31 12:52

投稿

think49
think49

スコア18166

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  */
46
46
 
47
- 'Hello, World!'.replace(/(?<=[\s\S]{7}).{5}/gs, 'JavaScript'); // "Hello, JavaScript!"
47
+ 'Hello, World!'.replace(/(?<=.{7}).{5}/gs, 'JavaScript'); // "Hello, JavaScript!"
48
48
 
49
49
  ```
50
50