Javascript　正規表現マッチングパターンを変数として扱いたい。

初心者のものです。

現在、ある単語を入力したら検索単語が入っていない文を
非表示にするプログラムを書いているのですが、うまくいきません。

【知りたいこと】
入力した値を正規表現で検索をかける際、match関数にある
変数として認識されないようでマッチしません。
(下記のコードでは、変数keywordにあたります)
どなたかご教授頂けないでしょうか。

javascript
1
2$("#button2").on('click',function(e){
3    var word =  $("#search").val();
4    var keyword = "/^(" + word + ")/g";
5
6    $("#search").val("");
7    var words = $("#board li");
8      words.each(function(){
9        if((this.innerHTML).match(keyword)){
10          $(this).css("display","none");
11        };
12      });
13  });
14
15
16

HTML
1<body>
2  <ul id="board">
3      <li>test1</li>
4      <li>test2</li>
5  </ul>
6  検索キー<input type="text" id = "search">
7  <button id = "button2">検索</button>
8</body>

行動規範の内容に同意します

回答3件

keywordの部分を下記に書き換えてみてください。

js
1var keyword = new RegExp(word,'g');

投稿2016/05/14 07:00

退会済みユーザー

総合スコア0

退会済みユーザー

2016/05/14 07:01

すみません回答かぶりました

jesushill

2016/05/14 09:22 編集

返信ありがとうございます！正規表現をつかって、word以外をマッチさせたかったので、　var word = "[^" + $("#search").val()+"]"; var keyword = new RegExp(word,'g'); としましたが、マッチ出来ません。 word以外をマッチさせたい場合はどのようにすれば良いのかご存知でしょうか？

退会済みユーザー

2016/05/14 09:50

wordの部分は元のままでif文を if(!(this.innerHTML).match(keyword)) ですね

行動規範の内容に同意します

正規表現リテラルは文字列じゃないんです。

javascript
1var keyword = "/^(" + word + ")/g";

↑を↓に変更。

javascript
1var keyword = new RegExp(word, 'g');

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

投稿2016/05/14 06:59

Lhankor_Mhy

総合スコア36087

jesushill

2016/05/14 09:23 編集

行動規範の内容に同意します

ベストアンサー

正規表現で検索語以外にマッチする

正規表現を使うコードは下記の通りですが、実際のところは「word以外にマッチ」が「検索単語が入っていない文を非表示にする」と相反する要件だと思います。

escaperegexpchar.js: 正規表現文字列をエスケープします(ES5準拠)。エスケープ文字列は new RegExp() に渡すことができます。

JavaScript
1<form id="sample">
2  <ul id="board">
3    <li>hoge</li>
4    <li>foo</li>
5    <li>piyo</li>
6    <li>hoge-foo</li>
7    <li>hoge-piyo</li>
8    <li>foo-piyo</li>
9  </ul>
10  検索キー<input type="text" id ="search">
11  <input type="submit" value="検索">
12</form>
13<script type="text/javascript">
14'use stirct';
15function escapeRegExpChar (string) {  // refer: https://gist.github.com/think49/7691225
16  return String(string).replace(/(?=[$()*+\-.?\[]^{|}])/g, '\\');
17}
18
19jQuery('#sample').on('submit', function (event) {
20  var elements =  event.target.elements,
21      search = elements['search'],
22      word = search.value,
23      escapedWord = escapeRegExpChar(word),
24      reg = new RegExp('((?:(?!' + escapedWord + ')[\\s\\S])+)|' + escapedWord, 'g');
25
26  console.info(search.value);
27  search.value = '';
28
29  jQuery('#board>li').each(function (i, element) {
30    var string = element.textContent,
31        results = [],
32        result;
33
34    while (result = reg.exec(string)) {
35      if (result[1]) {
36        results.push(result[1]);
37      }
38    }
39
40    console.log(results); // word 以外の文字列リスト
41
42    if (results.length) {
43      jQuery(element).addClass('matched');
44    } else {
45      jQuery(element).removeClass('matched');
46    }
47  });
48
49  event.preventDefault();
50});
51</script>

検索語が "hoge" なら "hoge" を除く "hoge-foo" や "hoge-piyo" にもマッチします。
「hoge 以外の文字列」として "-foo" や "-piyo" にマッチするからです。
つまり、element.textContent !== "hoge" と等価です。
更にいえば、このコードは var results = element.textContent.split('hoge') と等価です。
正規表現で頑張ってみましたが、他にもっと適したメソッドが存在します。

検索語を含まない動作を実現するには

element.textContent.indexOf('hoge') === -1 や element.textContent.inclues('hoge') を使うのが妥当だと思います。

Re: jesushill さん

投稿2016/05/14 12:03

think49

総合スコア18162

jesushill

2016/05/14 15:19

回答頂きましてありがとうございます。書いてくださったコード、非常に勉強になります。 (現在、勉強も兼ねて解読中です) 私もあれから、考えて以下の通りにしたら解決しました。【変更前】 if((this.innerHTML).match(keyword)){ $(this).css("display","none"); }; 【変更後】 if((this.innerHTML).match(keyword)){ } else{ $(this).css("display","none"); }; ※think49さんの仰る通り、element.textContent.inclues等を使ったほうが　楽ですね！

think49

2016/05/15 00:05

そのコードなら if (!this.innerHTML.match(keyword)) 二するとスマートですね。 String.prototype.includes は IE11- が対応していないため、Polyfillが必要です。 https://kangax.github.io/compat-table/es6/#test-String.prototype_methods_String.prototype.includes innerHTML はHTMLタグも抽出します。例えば、word === 'section' だった場合に <section にもマッチするので textContent や element.firstChild.data (li要素内に別の要素がない場合)がより安全だと思います。

行動規範の内容に同意します

あなたの回答