如何接受getElementById (stack_ * _overflow)之间的字符？

Question

我有一个页面，它每次都会更改输入字段的ID。例如，如果我现在访问页面，ID可以是"stack_15_overflow"，下一次可以是"stack_293_overflow"。

我希望对getElementById使用通配符值，例如"stack_ * _overflow" ( *匹配任何内容)，以获取与任何输入字段相关的值，不管输入字段的开头和结尾是什么文本。

代码：

function HelloId(string){
    var name=string
    document.getElementById('stack_*_overflow').value=name;
}

Answer 1

var elements = document.querySelectorAll('[id^="stack_"][id$="_overflow"]');

Answer 2

使用jQuery的attribute starts with和attribute ends with选择器：

$("[id^='stack'][id$=overflow]");

注意，这些选择器很昂贵，指定元素的类型可以提高性能：

$('element').filter("[id^='stack'][id$=overflow]");

Answer 3

您不能通过使用getElementById来实现这一点。一个更好的解决方案是querySelector或querySelectorAll，在那里您可以完全支持CSS选择器。

参考于MDN

您将需要以下两个属性选择器：

获取用特定字符串启动的元素

document.querySelector('[id^="stack_"]');

获取包含特定字符串的的元素

document.querySelector('[id*="stack_"]');

获取以特定字符串结束的元素

document.querySelector('[id$="_overflow"]');

通过将结束和启动选择器组合在一起，您可以获得以下结果并能够达到您想要的结果：

document.querySelector('[id^="stack_"][id$="_overflow"]');

编码愉快！