如何使用jQuery按特定规则匹配data-testid属性选择元素

解决方案 #

直接组合「开头匹配」和「结尾匹配」两个属性选择器规则即可精准筛选目标元素，正确写法如下：

// 匹配所有符合testid规则的元素
$("[data-testid^='my-page-'][data-testid$='-button']")

// 若要进一步限定仅匹配button元素，避免误选其他符合testid规则的非按钮元素，可使用更严谨的写法：
$("button[data-testid^='my-page-'][data-testid$='-button']")

规则说明 #

CSS属性选择器支持多条件叠加，多个属性匹配规则并列书写时，只有同时满足所有规则的元素才会被选中：

• [data-testid^='my-page-']：匹配data-testid属性值以my-page-开头的元素
• [data-testid$='-button']：匹配data-testid属性值以-button结尾的元素

两种规则组合后，完全匹配你需要的my-page-**-button的规则要求。如果使用原生JavaScript实现，语法也完全通用：

document.querySelectorAll("button[data-testid^='my-page-'][data-testid$='-button']")

内容的提问来源于stack exchange，提问作者theJuls