回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
はい。おおよそ合ってます。より正確にいうと、
|
|
36
36
|
|
|
37
|
-
- 入力された、複数の検索ワードがスペースで区切られた文字列から、検索ワードの配列を取得する
|
|
37
|
+
- 入力された、複数の検索ワードがスペース（やタブなどの空白文字）で区切られた文字列から、検索ワードの配列を取得する
|
|
38
38
|
|
|
39
39
|
という処理を行っています。具体例を挙げますと、たとえば、`#search` の input にたとえば以下のように入力されているとします。
|
|
40
40
|
|
5
テキスト修正
answer
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
` abc def xy `
|
|
42
42
|
|
|
43
|
-
すなわち、`$('#search').val()` が上記のような文字列であるとします。これは、3つの検索ワード `abc`, `def`, `xy` といくつかのスペースを含んでいます。`abc` の前には1個のスペースがあり、`abc`と `def` の間には1個のスペース、`def`と `xy` との間には2個のスペースがあり、さらに`xy` の後ろには3個のスペースがあるというものです。これは、検索ワード入力欄で、いくつかのワードを入力したり消したりしているうちに、検索ワードの間のスペースの数が
|
|
43
|
+
すなわち、`$('#search').val()` が上記のような文字列であるとします。これは、3つの検索ワード `abc`, `def`, `xy` といくつかのスペースを含んでいます。`abc` の前には1個のスペースがあり、`abc`と `def` の間には1個のスペース、`def`と `xy` との間には2個のスペースがあり、さらに`xy` の後ろには3個のスペースがあるというものです。これは、検索ワード入力欄で、いくつかのワードを入力したり消したりしているうちに、検索ワードの間のスペースの数が2個以上ある箇所ができてしまったり、先頭の検索ワードの前や最後の検索ワードの後に1個以上スペースが残ってしまっている状況を再現しています。このとき
|
|
44
44
|
|
|
45
45
|
```javascript
|
|
46
46
|
const searchKeys = $('#search').val().trim().split(/\s+/);
|
4
テキスト修正
answer
CHANGED
|
@@ -78,4 +78,4 @@
|
|
|
78
78
|
$(this).css('display', matched ? 'list-item' : 'none');
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
によって、当該`li` の CSSプロパティ
|
|
81
|
+
によって、当該`li` の CSSプロパティ`display` に、`matched` が true だったら `'list-item'`が指定され、falseだったら `'none'` が指定されます。各`<li>`について、CSS `display` に `'list-item'`が指定されると表示され、`'none'`が指定されると表示されなくなります。
|
3
テキスト修正
answer
CHANGED
|
@@ -21,4 +21,61 @@
|
|
|
21
21
|
|
|
22
22
|
また、正規表現で使っている `\b` は単語の境界（[Word Boundaries](https://www.regular-expressions.info/wordboundaries.html)）です。
|
|
23
23
|
|
|
24
|
-
以上、参考になれば幸いです。
|
|
24
|
+
以上、参考になれば幸いです。
|
|
25
|
+
|
|
26
|
+
### 追記
|
|
27
|
+
|
|
28
|
+
コメントから頂きました質問に回答します。
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
> 「$('#search').val().trim().split(/\s+/);」部分は、
|
|
33
|
+
> 入力されたキーワードから無駄なスペースを削除したものを取得するという認識で合ってますでしょうか？
|
|
34
|
+
|
|
35
|
+
はい。おおよそ合ってます。より正確にいうと、
|
|
36
|
+
|
|
37
|
+
- 入力された、複数の検索ワードがスペースで区切られた文字列から、検索ワードの配列を取得する
|
|
38
|
+
|
|
39
|
+
という処理を行っています。具体例を挙げますと、たとえば、`#search` の input にたとえば以下のように入力されているとします。
|
|
40
|
+
|
|
41
|
+
` abc def xy `
|
|
42
|
+
|
|
43
|
+
すなわち、`$('#search').val()` が上記のような文字列であるとします。これは、3つの検索ワード `abc`, `def`, `xy` といくつかのスペースを含んでいます。`abc` の前には1個のスペースがあり、`abc`と `def` の間には1個のスペース、`def`と `xy` との間には2個のスペースがあり、さらに`xy` の後ろには3個のスペースがあるというものです。これは、検索ワード入力欄で、いくつかのワードを入力したり消したりしているうちに、検索ワードの間のスペースの数が1個以上ある箇所があったり、先頭キーワードの前や最後のワードの後に1個以上スペースが残っているような状況を想定しています。このとき
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
const searchKeys = $('#search').val().trim().split(/\s+/);
|
|
47
|
+
```
|
|
48
|
+
によって、`searchKeys` として以下の配列が取得されます。
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
["abc", "def", "xy"]
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
> また、「searchKeys.every(key => RegExp(key, 'i').test(text));」部分は、
|
|
56
|
+
> リスト情報と取得した配列キーワードを検証しているのでしょうか？
|
|
57
|
+
|
|
58
|
+
はい、そうです。リストアイテム（`<li>`）に含まれるテキストが、入力された複数の検索ワードに該当しているかを検証しています。より詳しく説明すると、
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
const matched = searchKeys.every(key => RegExp(key, 'i').test(text));
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
という行によって、左辺の `matched` に `true` か `false` のどちらかが入ります。`true` のときは、ループで回している、各ループ本体における当該の `li` の内容が複数の検索ワードについてのAND条件に「該当した」ことを表します。逆に `false` のときは、「該当しなかった」ことを表します。
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
> 最後に「matched ? 'list-item'」の部分は
|
|
68
|
+
> どういった意味を成しているのでしょうか？
|
|
69
|
+
|
|
70
|
+
その後の `: 'none'` も含めた
|
|
71
|
+
```
|
|
72
|
+
matched ? 'list-item' : 'none'
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
の部分は、[条件（三項）演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) を使った式です。`matched` が true のとき `'list-item'` 、 false のとき `'none'` という文字列を返しますので、
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
$(this).css('display', matched ? 'list-item' : 'none');
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
によって、当該`li` の CSSプロパティ'display' に、`matched` が true だったら `list-item`が指定され、falseだったら `'none'` が指定されます。`'none'`が指定されるとその`li`は表示されなくなります。
|
2
テキスト修正
answer
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
```
|
|
14
14
|
- **動作確認用サンプル:** [https://codepen.io/jun68ykt/pen/qBbyegQ?editors=1010](https://codepen.io/jun68ykt/pen/qBbyegQ?editors=1010)
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
このcodepenのサンプルは、以下のように動作します。
|
|
17
17
|
- たとえば、`bcdef` を入力して検索をクリックすると、`abcd bcdef` と `bcdef stuvw` の２つが表示される。
|
|
18
18
|
- 入力した`bcdef` を消さずに、続けてスペースを打ち、さらに `abcd` と入力してから検索をクリックすると、`bcdef`と`abcd`の両方を含む `abcd bcdef` のみが表示される。
|
|
19
19
|
- 検索ワードに対するマッチングにおいて、大文字と小文字の違いは無視される。
|
1
テキスト修正
answer
CHANGED
|
@@ -13,4 +13,12 @@
|
|
|
13
13
|
```
|
|
14
14
|
- **動作確認用サンプル:** [https://codepen.io/jun68ykt/pen/qBbyegQ?editors=1010](https://codepen.io/jun68ykt/pen/qBbyegQ?editors=1010)
|
|
15
15
|
|
|
16
|
+
上記のコードは、以下のように動作します。
|
|
17
|
+
- たとえば、`bcdef` を入力して検索をクリックすると、`abcd bcdef` と `bcdef stuvw` の２つが表示される。
|
|
18
|
+
- 入力した`bcdef` を消さずに、続けてスペースを打ち、さらに `abcd` と入力してから検索をクリックすると、`bcdef`と`abcd`の両方を含む `abcd bcdef` のみが表示される。
|
|
19
|
+
- 検索ワードに対するマッチングにおいて、大文字と小文字の違いは無視される。
|
|
20
|
+
- 検索ワード入力欄を消去してから検索をクリックすると、すべてのリストアイテムが表示される。
|
|
21
|
+
|
|
16
|
-
正規表現で使っている `\b` は単語の境界（[Word
|
|
22
|
+
また、正規表現で使っている `\b` は単語の境界（[Word Boundaries](https://www.regular-expressions.info/wordboundaries.html)）です。
|
|
23
|
+
|
|
24
|
+
以上、参考になれば幸いです。
|