質問編集履歴

1

回答頂いた内容で修正しました。

2016/11/10 14:19

投稿

drizzing20
drizzing20

スコア363

test CHANGED
File without changes
test CHANGED
@@ -143,3 +143,91 @@
143
143
  }
144
144
 
145
145
  ```
146
+
147
+
148
+
149
+ 改善後
150
+
151
+ ```JavaScript
152
+
153
+ jQuery(document).ready(function($) {
154
+
155
+ var $thread = $(".high");
156
+
157
+ var $form = $(".form:first");
158
+
159
+ var $input = $(".textarea:first");
160
+
161
+ var $lis = $thread.find("> ul > li");
162
+
163
+
164
+
165
+ $form.on("submit", function(e){
166
+
167
+ var liArr = [];
168
+
169
+ e.preventDefault();
170
+
171
+ $lis.each(function(){
172
+
173
+ liArr.push($(this).text().toLowerCase());
174
+
175
+ $item = $(this);
176
+
177
+ $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1'));
178
+
179
+ });
180
+
181
+ var searchWord = $.trim($input.val()).toLowerCase();
182
+
183
+
184
+
185
+ //ひらがなをカタカナでも検索可能
186
+
187
+ searchWordkata = searchWord.replace(/[ぁ-ん]/g, function(s) {
188
+
189
+ return String.fromCharCode(s.charCodeAt(0) + 0x60);
190
+
191
+ });
192
+
193
+ //カタカナをひらがなでも検索可能
194
+
195
+ searchWordkana = searchWord.replace(/[ァ-ン]/g, function(s) {
196
+
197
+ return String.fromCharCode(s.charCodeAt(0) - 0x60);
198
+
199
+ });
200
+
201
+
202
+
203
+ if(searchWord.length){
204
+
205
+ for(var li in liArr){
206
+
207
+ $item = $lis.eq(li);
208
+
209
+ if( liArr[li].indexOf(searchWordkata) != -1 || liArr[li].indexOf(searchWordkana) != -1 || liArr[li].indexOf(searchWord) != -1){
210
+
211
+ //カタカナでもひらがなでもヒットするように2つ必要
212
+
213
+ $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWordkana+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
214
+
215
+ $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWordkata+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
216
+
217
+ $item.removeClass("is-hidden").html($item.html().replace(new RegExp(searchWord+"(?!([^<]+)?>)", "gi"), '<span class="highlight">$&</span>'));
218
+
219
+ }
220
+
221
+ }
222
+
223
+ $("html,body").animate({scrollTop:$(".highlight").offset().top});
224
+
225
+ }
226
+
227
+ });
228
+
229
+ });
230
+
231
+ </script>
232
+
233
+ ```