用逗号分隔的列表中的多个搜索的正则表达式 [英] regular expression for multiple search in list seperated by comma

问题描述

我有一个类似于这个的列表，它与简单的正则表达式一起使用，现在我的要求是添加逗号分隔的多个搜索选项。

I am having a list similar to this which works with the simple regular expression, now my requirement is to add a comma separated multiple search option.

例如在这个现在，如果我输入Elaine，它会显示我Elaine Marley，现在我想要，如果我正在输入Elaine，Stan它应该归还给我两个结果Elaine Marley& ; Stan。

For example in this right now if i am typing "Elaine" it shows me "Elaine Marley", now i want, if i am typing "Elaine, Stan" it should return me two result "Elaine Marley" & "Stan".

如果需要更多详细信息，请告知我们，我们将不胜感激。

Please let me know in case more details needed, any help would be appreciated.

任何人都可以帮我正则表达式吗？

Can anyone help me with the regular expression?

谢谢

Dhiraj

推荐答案

在阅读之前先看看演示：

Take a look at the the demo before reading :

// http://stackoverflow.com/a/3561711/1636522

RegExp.escape = function(s) {
  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};

// vars

var span = getEl('span'),
  input = getEl('input'),
  li = getEls('li'),
  tid;
  
// onkeyup

addEventSimple(input, 'keyup', function(e) {
  // cancels previous query
  tid && clearTimeout(tid);
  // waits 250ms then filters
  tid = setTimeout(function() {
    tid = null;
    span.textContent = +span.textContent + 1;
    filter(e.target.value);
  }, 250);
});

// filtering

function filter(input) {
  var i = 0,
    l = li.length,
    re = input && toRegex(input),
    el;
  for (; i < l; i++) {
    el = li[i]; // list item
    if (!re || re.test(el.textContent)) {
      el.style.display = 'list-item';
    } else {
      el.style.display = 'none';
    }
  }
}

// input > regex

function toRegex(input) {
  input = RegExp.escape(input);
  input = input.match(/[^,\s]+(\s+[^,\s]+)*/g) || [];
  input = input.join('|');
  return new RegExp(input, 'i');
}

// http://www.quirksmode.org/js/eventSimple.html

function addEventSimple(obj, evt, fn) {
  if (obj.addEventListener) obj.addEventListener(evt, fn, false);
  else if (obj.attachEvent) obj.attachEvent('on' + evt, fn);
}

// helpers

function getEl(tag) {
  return getEls(tag)[0];
}

function getEls(tag) {
  return document.getElementsByTagName(tag);
}

<input type="text" placeholder="Example : &quot;nn, oo, ca&quot;." />
<div style="padding:.5em .5em 0">Filtered <span>0</span> times.</div>
<ul>
  <li>Guybrush Threepwood</li>
  <li>Elaine Marley</li>
  <li>LeChuck</li>
  <li>Stan</li>
  <li>Voodoo Lady</li>
  <li>Herman Toothrot</li>
  <li>Meathook</li>
  <li>Carla</li>
  <li>Otis</li>
  <li>Rapp Scallion</li>
  <li>Rum Rogers Sr.</li>
  <li>Men of Low Moral Fiber</li>
  <li>Murray</li>
  <li>Cannibals</li>
</ul>

这里我只公开 toRegex 函数。假设我们输入了以下值 ：el，le，az。

Here I'll only expose the toRegex function. Say that we have entered the following value : "el, le, az".

var regex = toRegexp('el, le, az'); // regex = /el|le|az/i
regex.test('Elaine'); // true  -> show
regex.test('Marley'); // true  -> show
regex.test('Stan');   // false -> hide

生成的正则表达式（ / el | le | az / i ）表示： ：搜索el或le或az， i gnore case（允许EL，Le 或aZ也是如此）。现在，让我们逐行阅读这个功能：

The resulting regular expression (/el|le|az/i) means : search for "el" or "le" or "az", and ignore the case (allows "EL", "Le" or "aZ" as well). Now, let's read this function line by line :

input = RegExp.escape(input); // http://stackoverflow.com/q/3561493/1636522
input = input.match(/[^,\s]+(\s+[^,\s]+)*/g) || []; // ["el", "le", "az"]
input = input.join('|'); // "el|le|az"
return new RegExp(input, 'i'); // /el|le|az/i

让我们进一步了解 / [^，\\\] +（\ s + [^，\ s] +）* / g  ：

Let's go further about /[^,\s]+(\s+[^,\s]+)*/g :

[^,\s]+         any char except comma and whitespace, one or more times
(\s+[^,\s]+)*   one or more whitespaces + same as above, zero or more times
g               grab all occurrences

使用愚蠢输入的使用示例 ：

Usage example with a stupid input :

'a,aa,aa a, b , bb , bb b , , '.match(/[^,\s]+(\s+[^,\s]+)*/g);
// ["a", "aa", "aa a", "b", "bb", "bb b"]

这就是它 ！希望足够清楚： - ）

That's it ! Hope that was clear enough :-)

进一步阅读 ： http://www.javascriptkit.com/javatutors/redev.shtml 。

Further reading : http://www.javascriptkit.com/javatutors/redev.shtml.

这篇关于用逗号分隔的列表中的多个搜索的正则表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！