jQuery match()变量插值-复杂的正则表达式

Question

我已经查看了这个，在某些方面它是有帮助的。

问题在于，我有一个用户列表通过用户点击传递到一个元素中；类似这样：

<div id="box">
    joe-user
    page-joe-user
    someone-else
    page-someone-else
</div>

当用户点击时，我想确保用户尚未点击过div。因此，我正在做一些类似于以下的事情：

if ( ! $('#box').html().match(rcpt) )
{
   update_div();
}
else
{
   alert(rcpt+' already exists.');
}

然而，由于JavaScript对正则表达式缺乏插值功能，导致在选择“page-joe-user”后再选择“joe-user”时，我的警报会触发，这两者显然不完全相同。在Perl中，我会这样做：

if ( $rcpt =~ /^\Qrcpt\E/ )
{
    # code
}

我想要做的就是将我的match()函数改为：

if ( ! $('#box').html().match(/^rcpt/) )
{
    # code
}

if ( ! $('#box').html().match(rcpt) ) 看起来有点有希望，但它也失败了。使用 new RegExp() 也不能在函数内部使用复杂的正则表达式语法拼接。在 IE 中，$('#box').html().match(new RegExp('^'+rcpt))。我还尝试过 $('#box').html().match('/^'+rcpt'/')。我只能想象我漏掉了什么。我对 JavaScript 还是很陌生的。

我似乎找不到任何真正解决此类用例的东西，在这个网站上。

TIA

- Jim

Answer 1

match函数只适用于字符串，而不适用于jQuery对象。

最好的方法是将每个用户名放入单独的HTML标签中。

例如：

<ul id="users">
    <li>joe-user</li>
    <li>page-joe-user</li>
    <li>someone-else</li>
    <li>page-someone-else</li>
</ul>

你可以接下来写以下内容：

然后，你可以编写以下代码：

if($('#users li').is(function () { return $(this).text() === rcpt; }))

如果你想用自己的方法来做，你应该调用text()来获取元素内部的字符串。（$('#box').text().match(...)）

---

编辑:使用你的HTML做这件事情最好的方法是分割字符串。

例如：

var userExists = false;
var users = $('#box').text().split(/\r?\n/);

for(var i = 0; i < users.length; i++) {   //IE doesn't have indexOf
    if (users[i] == rcpt) {
        userExists = true;
        break;
    }
}
if (userExists) {
    //Do something
}

这样做的额外好处是不容易受到正则表达式注入攻击。

- SLaks

---

rcpt 在我的代码中实际上不是一个对象，它只是一个变量。然而，我会考虑你的回复作为解决这个问题的一种方法。 - Jim

如果 rcpt 是一个变量，只需删除引号。请注意大小写敏感。如果不希望如此，请调用 toUpperCase。 - SLaks

嗯，你看，这正是我所做的。然而，问题在于match()将joe-user与page-joe-user混淆了。因此，为了复制这个问题...以page-joe-user和joe-user为例：$('#element').html().match(rcpt)大多数情况下都可以工作，但如果我先点击page-joe-user，然后再尝试点击joe-user，那么match()会触发一个匹配，而实际上它们并不匹配（或者说我不希望它们匹配）。如果我反过来点击它们，那么一切都正常。因此，为了缓解这个问题，我想要锚定我的正则表达式，因为这看起来像是典型的正则表达式贪婪性。 - Jim

然后我想道歉。我意识到我弄混了一个关键点，就是我正在对HTML进行match()匹配。 - Jim

好的，这是一个更好的解决方案，我已经实现了它。运行良好。谢谢。 - Jim