【问题标题】:How can I implement a search using regex?如何使用正则表达式实现搜索?
【发布时间】:2011-10-01 00:06:48
【问题描述】:

我有一些元素:

<p>Windows Phone 7</p>
<p>Windows Phone 7.5 "Mango"</p>
<p>Phone Windows 7</p>
  1. 如果我搜索Phone 7,它应该会返回所有结果。
  2. 如果我搜索7 Windows,它应该会返回所有结果。
  3. 如果我搜索 "Phone Windows",它应该只返回最后一个元素。

基本上用户会在input 中输入一些文本,我想用正则表达式实现ANDOR

我该如何实现?

【问题讨论】:

  • 并将每个元素放到一个数组中,循环遍历数组,如果一个元素包含搜索字符串,则将其添加到results数组中,然后返回results数组。
  • 您必须更详细地定义规则。例如,代码如何知道7 Windows 不依赖于顺序,但Phone Windows 是?单词匹配将使所有三个匹配Phone Windows。字符串匹配不会匹配 7 Windows 的任何内容。我们需要更多的逻辑规则。另外,您是否只匹配整个单词?
  • @NullUserExceptionఠ_ఠ 不带引号它应该匹配所有。带引号的都不应该匹配。
  • 接近了吗? jsfiddle.net/KUYcA
  • 为什么需要使用正则表达式?如果规则如您所说的那么简单,那么您最好使用indexOf

标签: javascript jquery regex


【解决方案1】:

您需要解析查找文本并从各个部分构造正则表达式。首先,找到所有带有/"[^"]+"/g 的短语并去掉引号。接下来,从查找文本中删除短语并通过在空格上拆分来查找所有剩余的单词:/\s+/。然后连接您的两个数组并加入以创建一个新的正则表达式,其中每个搜索词都包含在正向前瞻语法中:(?=.*SearchTerm)。最后,使用该正则表达式来测试给定的文本是否匹配。这是一个搜索功能:

function search(find, within) {
    find = find.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&");
    var phrase = /"[^"]+"/g;
    var phrases = find.match(phrase) || [];
    phrases = $.map(phrases, function(s) {
        return s.replace(/"/g, "");
    });
    var words = find.replace(phrase, "").split(/\s+/);
    var terms = words.concat(phrases);
    var searchExpression = new RegExp("(?=.*" + terms.join(")(?=.*") + ").+", "i");
    return searchExpression.test(within);
}

用一些 jQuery 将它绑定到你的页面中:

$(function() {
    $("#searchButton").click(function() {
        var searchText = $("#searchInput").val();
        $("p").removeClass("matchesSearch").filter(function() {
            return search(searchText, $(this).text());
        }).addClass("matchesSearch");
    });
});

在这里工作:http://jsfiddle.net/gilly3/DVxem/

编辑: 也适用于此处,修复了正则表达式元字符转义:http://jsfiddle.net/gilly3/DVxem/3/

【讨论】:

  • 我正要发布我实施的解决方案,它与您的非常相似。极好的。我构建正则表达式的解决方案是var p = text.match(/"([^"]+)"|([^ ]+)/gi);var re = new RegExp(p.join("|").replace(/"/g, ""), "gi");
  • -1 如果您正在寻找常量字符串,为什么要构建RegExp 对象?这不仅会影响效率,而且如果您的任何搜索词包含正则表达式元字符(首先想到的是.),这将无法正常工作
  • @BrunoLM jsfiddle.net/DVxem/2 搜索 7.。哎呀... Pronto,quebrei o seu sistema de busca。
  • @NullUser - 当你可以只使用一个正则表达式时,为什么还要使用循环?转义正则表达式字符是一项微不足道的任务 - 请参阅:jsfiddle.net/gilly3/DVxem/3。我会更新我的答案。真的,这里有什么问题?风格偏好?
  • 我删除了反对票,但我只是认为如果您正在寻找常量字符串,则使用正则表达式从根本上是错误的。
【解决方案2】:

基于skeleton codeIAbstractDownvoteFactory

var search = $('#text').val(),
    filter;

if (search.match(/^"(.+)"$/)) {
    search = search.match(/^"(.+)"$/)[1].toLowerCase();
    filter = function() {
        return $(this).text().toLowerCase().indexOf(search) != -1;
    };
} else {
    var words = search.split(" ");
    filter = function() {
        for (var i=0; i != words.length; i++) {
            if ($(this).text().toLowerCase().indexOf(words[i]) == -1) {
                return false;
            }
        }
        return true;
    }
}

$('p').css({color: 'black'}).filter(filter).css({
    color: 'red'
});

演示:http://jsfiddle.net/kVUJj/3/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-20
    • 2011-09-02
    • 1970-01-01
    • 2013-11-02
    相关资源
    最近更新 更多