Question

我面临着与here in this link所述相同的情景。解决方案也是可以接受的，但在最坏的情况下变得乏味。例如，我正在尝试将该技术应用于以下概念场景：

<input id="txtXMLS01" />
<input id="txtXMLS02" />
<input id="txtXMLS03" />
.
.
.
<input id="txtXMLS100" />

<input id="txtXMLM01" />
<input id="txtXMLM02" />
<input id="txtXMLM03" />
.
.
.
<input id="txtXMLM100" />

<input id="txtSVGS01" />
<input id="txtSVGS02" />
<input id="txtSVGS03" />
.
.
.
<input id="txtSVGS100" />

<input id="txtSVGM01" />
<input id="txtSVGM02" />
<input id="txtSVGM03" />
.
.
.
<input id="txtSVGM100" />

是否有其他类似于以下代码段的技术

<script type="text/javascript">
var textBox=document.querySelectorAll("input[id^=txt(XML|SVG)[S|M|L](\d)*]")
</script>

添加[1]：我的目标是仅提取具有以下模式txtXMLS* txtXMLM* txtSVGS* txtSVGM*的节点。为什么我具体，因为同一页面中还有其他以txt

开头的文本框

Answer 1

您可以将filter与regex

一起使用

var textBoxes = Array.from( document.querySelectorAll("input[id]" ) ).filter( s => !!s.id.match( /txt(XML|SVG)[S|M|L](\d)*/ );

<强>解释

Array.from会将document.querySelectorAll("input[id]" )的输出转换为数组
filter将根据作为正则表达式传递的条件从array.from过滤结果数组
!!s.id.match( /txt(XML|SVG)[S|M|L](\d)*/会将匹配结果转换为等效的布尔值值。

将OR子句添加到document.querySelectorAll

1 个答案: