Javascript 在元素的类名中的子字符串后选择一个字符串

我有一个包含输入文本的元素，用于使用jQuery方法find获取输入文本

输入文本有一个类名，如page-id-x，其中x是变量，因此我想在子字符串page-id之后选择该数字，这就是我尝试的：

var id = ui.item.find('input').attr('class').split(/\s+/).filter(function(s){
    return s.includes('page-id-');
})[0].split('-')[2];
console.log(id);

我认为这段代码太复杂了，但我想不出其他方法来实现它

如果有人知道更好的方法，我会很感激的

---

提前感谢。

您可以使用*=选择器找到您的元素

let elem = document.querySelector('[class*=page-id-]')

获得元素后，可以将id解析出来：

let [base, id] = elem.className.match(/page-id-(\d+)/)
console.log('page id: %s', id);

---

在使用jQuery时，请看以下内容：

对于您的情况，您可以使用$'[class^=page id-'。上面链接中列出的这些类型的选择器实际上也可以在CSS中工作。至少大多数选择器应该（如果不是全部的话）可以工作

要在pageID-之后获取数字，我的建议是将该数字存储在其他一些HTML属性中，如datapageid=1等

所以你可以：

<div id="page-id-3" data-pageID="3">CONTENT</div>

然后，当您使用$'[class^=page id-'访问DOM元素时，您可以使用.attr'data-pageID'.val.访问该数字。

我将假设page-id-x的x部分，而不是id部分，是变化的，因为代码是这样假设的

另一种方法是使用正则表达式，但我不确定是否会称之为更简单：

var id = ui.item
  .find('input')
  .attr('class')
  .match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];

例如：

变量ui={ 项目：$项目 }; var id=ui.item .查找“输入” .attrclass .match/？：^ |\spage id-[^-]+？：\s |$/[1]； console.logid；

---

如果可以控制HTML标记，而不是使用类名，则可以使用数据属性。例如，而不是：

<input class="page-id-1">

---

请提供一个元素标记的示例。我认为这段代码太复杂了，但我想不出其他方法来实现它。您说过id部分是可变的。如果是，那么您所拥有的不仅仅是太复杂，它不会起作用。您能澄清一下吗？也许您的意思是x部分是可变的？@t.J.Crowder是的，确实是我的意思x部分是什么variable@Connum，我编辑了我的答案，因为我意识到我第一次没有正确回答这个问题。我更新的答案对他们有效，但他们可能必须稍微更改代码。不是.attr'data-pageID'.val，只是.attr'data-pageID'。使用data-*属性是一个很好的建议；我会将其与删除类中的页面ID。我的.val部分不好。他们可能需要使用parseInt或类似的东西。是的，这取决于ID是否为数字。但是他们当前的解决方案不使用数字，所以…@naomik:我不同意。大概作者负责标记，并且知道该元素中的内容。记住，这是针对对于一个特定的元素。没错，我想知道，对于假定数据结构为tho…无论如何gj的代码，存在哪些令人信服的参数^_^

<input data-page-id="1">

$('[data-page-id]').attr('data-page-id')