在document.querySelectorAll中添加OR子句

Question

我正面臨着此鏈接中描述的相同場景。 解決方案也是可以接受的，但在最壞的情況下變得乏味。 例如，我正在嘗試將該技術應用於以下概念場景：

<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

您可以使用帶有regex filter

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將根據作為regex傳遞的條件從array.from過濾結果數組

• !!s.id.match( /txt(XML|SVG)[S|M|L](\\d)*/將匹配結果轉換為等效的布爾值。