模拟 :starts-with 或 :ends-with 以搜索文本的 jQuery 选择器？答案

【问题标题】：jQuery selector that simulates :starts-with or :ends-with for searching text?模拟 :starts-with 或 :ends-with 以搜索文本的 jQuery 选择器？
【发布时间】：2012-03-02 02:28:54
【问题描述】：

如果您查看 jQuery 网站上的selectors list，就会发现属性上的starts-with 和ends-with 选择器。还有一个 :contains 用于搜索文本的选择器：

alert( $("div").find("span:contains(text)").html() );

jQuery 是否有使用starts-with 或ends-with 搜索字符串的实现？

仅供参考：我需要搜索一个 XML 对象。

【问题讨论】：

标签： javascript jquery xml jquery-selectors contains

【解决方案1】：

据我所知，默认情况下不是，但您可以通过$.expr[":"]：http://jsfiddle.net/h6KYk/ 添加自己的伪选择器。

$.extend($.expr[":"], {
    "starts-with": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),
            term = data[3];

        // first index is 0
        return text.indexOf(term) === 0;
    },

    "ends-with": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),
            term = data[3];

        // last index is last possible
        return text.lastIndexOf(term) === text.length - term.length;
    }
});

【讨论】：

哦，哇。非常感谢。感谢您的意见。你能详细说明你的过程吗？每个函数中“set”和“i”的目的是什么？什么是数据[3]？再次感谢您。
@user717236：你在$.expr[":"]中设置的函数被传递了几个参数来决定某个元素是否应该通过。 elem 是要测试的元素，i 是计数器。 data 是一个包含选择器值的数组；如果您选择使用:starts-with('foo')，data[3] 将是字符串"foo"。 set 是由您的函数过滤的所有元素的集合，例如div:starts-with('foo') 会将所有divs 传递为set，然后由函数过滤。
感谢您的解释，@pimvdb。有没有我可以查找的资源，它提供了关于这个主题的更深入的讨论？例如，您在每个函数中指定了四个参数。这些变量是否与 jQuery 的 find 方法声明相关（即 function(a) { var b=this, c, d; ... }）？
@user717236：据我所知，不是直接的。它们是 jQuery 选择器引擎 Sizzle 的一部分。我找不到关于这个主题的官方文章，但this one 似乎解释了一点。作为旁注，您似乎已经发布了 jQuery 缩小版的功能。可读代码位于jquery.com 作为“开发”版本。

【解决方案2】：

当您不想扩展 jQuery 时，可以使用 filter() 函数来创建包含功能：

$("div").find("span").filter(function () {
    return $(this).text().indexOf(text) >= 0;
});

或者用正则表达式创建一个startsWith函数：

var expression = new RegExp('^' + text);
$("div").find("span").filter(function () {
    return expression.test($.trim($(this).text()));
});

endsWith 函数非常相似：

var expression = new RegExp(text + '$');
$("div").find("span").filter(function () {
    return expression.test($.trim($(this).text()));
});

注意$.trim() 的使用，因为 HTML 可以包含很多空格。

【讨论】：