JavaScript/jQuery - 从元素的 id 中获取整数答案

【问题标题】：JavaScript/jQuery - grabbing an integer from an element's idJavaScript/jQuery - 从元素的 id 中获取整数
【发布时间】：2010-01-08 19:41:44
【问题描述】：

来自以下标记。

<div id="my-div">
    <a href="#" id="link-1">Somewhere</a>
    <a href="#" id="link-2">Somewhere else</a>
</div>

有哪些选项，使用 jQuery 选择器和 JavaScript 来获取 id 中的整数？

例如。

$("#my-div a").click(function(){
    $(this).id // ... somehow grab n from "link-n"        
    alert(n);
});

【问题讨论】：

标签： javascript jquery regex

【解决方案1】：

你可以试试：

var n = $(this).attr('id').match(/link-(\d+)/)[1];

这会获取id 属性，匹配link-(\d+) 模式（这意味着link- 后跟一个或多个数字），然后提取第一个子表达式匹配（括号\d+ 中的部分），这应该是您要查找的号码。

如果您需要将n 用作整数而不是字符串，则应使用parseInt，并确保指定基数为10：

var n = parseInt($(this).attr('id').match(/link-(\d+)/)[1], 10);

如果您的id 属性不能保证以link- 开头后跟一位或多位数字，并且您想捕捉这种情况而不是抛出错误，则应检查match 的返回值：

var match = $(this).attr('id').match(/link-(\d+)/);
if (match) {
    var n = parseInt(match[1], 10);
    alert(n);
} else {
    // do something else if they don't match
}

【讨论】：

当然，更简洁。
你为什么要使用这个而不是更简单的substr()？如果您假设前五个字符是link-，您不妨假设它的最后一部分将是您要查找的数字，n'est pas？
@zombat - 是的，但我宁愿断言我确实在使用“链接-(\d+)”，然后再将其视为一个。
@zombat 因为它使您的代码更具自我记录性。对于稍后阅读您的代码的人来说，他们可能不知道您为什么要进行 substr 匹配，而正则表达式准确地显示了您要查找的内容。这也意味着如果您以某种方式将元素与 id 以不同的格式匹配，它将失败；通常，尽早失败并从源头捕获错误比处理损坏的数据并在您将该数据用于其他用途后稍后失败要好。（tl；博士 gnarf 说的）
@Brian - 我不同意。如果我在不以link- 开头的元素上使用这行代码var n = parseInt($(this).attr('id').match(/link-(\d+)/)[1], 10);，则会产生错误并结束该函数中的Javascript 处理。最好继续进行空匹配（例如在意外 id 上的 substr()）并在使用之前检查匹配是否确实是 int。 substr() 也比正则表达式简单得多，并且提高了代码的可读性。

【解决方案2】：

$(this).attr('id').replace('link-','')

【讨论】：

他在问如何解析得到的 id
这不返回“link-1”吗？
这将返回 ID。不是仅请求的数字部分。

【解决方案3】：

只要前面的文本始终保持不变，您就可以使用substring 方法获取数字。

$(this).attr('id').substring(5)

【讨论】：

.id 不起作用，我不认为。您需要首先列出的attr('id') 表单。
正如 gnarf 指出的那样，$(this).id 不起作用。如果在this 周围使用jQuery 对象，则必须使用attr()。
另外，我想你的意思是substring(5)，而不是substring(6)。
干杯。我看到其他人使用 .id 并认为这是我从 jQuery 中遗漏的东西。谢谢僵尸，哈哈。误判

【解决方案4】：

$(this).attr('id').split('-')[1];

【讨论】：

不敢相信花了这么长时间才得到基于拆分的答案。 +1

【解决方案5】：

var id = $(this).attr('id'),
    regex = /(\d+)/,
    matched = id.match( regex );

if ( matched ) {
    alert( matched[1] )
}

【讨论】：

我认为&& matched.length > 1 是不必要的，因为您使用的是/(\d+)/，如果不捕获某些内容，正则表达式是不可能匹配的。

【解决方案6】：

我通常会这样做：

$("#my-div a").click(function(){
    var match;
    if (match = $(this).attr('id').match(/link-(\d+)/)) {
      var number = parseInt(match[1],10);
      alert(number);
    }
});

【讨论】：

+1 用于使用正则表达式 '()' 分组。你也不需要'link-'，只要 .match(/(\d+)/) 就可以了。谁在乎主要文本？
@Jarrett - 我宁愿确保它是一个 link-? 而不是仅仅说“任何旧号码都可以”......这样，如果你有一个 <a id='rss-1'> 它不会使用link- 特定代码。

【解决方案7】：

使用正则表达式将是您的最佳选择，例如：

// id contains '1' for id="link-1"
var id = parseInt(this.id.replace(/[^\d]/g, ''), 10);

【讨论】：

如果 ID 以 0 开头来停止八进制解析，您应该使用 parseInt(...,10);：parseInt('010') = 8... 另外 - 在 jQuery 中 $(this).id 将未定义 - 尝试 @ 987654325@
或者，实际上，只是this.id。无需将jQuery拖入所有内容。
@gnarf @bobince - 感谢 cmets，我已经更新了答案以反映他们。

【解决方案8】：

如果你知道你所有的id都以“link-”为前缀，你可以简单地获取id的子串：

$("#my-div a").click(function(){
   alert(this.id.substr(5));
});

【讨论】：

$(this).attr('id') 而不是 $(this).id
罗杰，谢谢。 'ol复制粘贴有点快。我实际上只是选择this.id。

【解决方案9】：

这应该是最简单的方法了：

var id = this.id.replace(/[^\d]/g,'')*1;

它将 ID 属性中的任何数字作为number 返回（*1 进行转换，类似于parseInt）。在您的示例中：

$("#my-div a").click(function(){
    var n = this.id.replace(/[^\d]/g,'')*1;
    alert(n);  // alerts any number in the ID attribute
    alert(typeof n) // alerts 'number' (not 'string')
});

【讨论】：

【解决方案10】：

可以使用正则表达式解析出数字：

var match = /link-(\d+)/.exec($(this).attr('id'));
var num = match[1];

【讨论】：