如何使用Javascript從CSS選擇器字符串中刪除所有偽選擇器？

Question

對於腳本，我需要驗證DOM中是否存在CSS選擇器。 我想知道如何使用通用規則處理多個:pseudo選擇器。

這樣的事情很簡單：

var selector = "div.foo div.bar:active"

可以由

selector.split(":").shift(); // > div.foo div.bar

但是當我有多個選擇器時，我不知道如何刪除它們。 像這樣：

var selector = "div.foo:hover div.bar:after"

題：
如何從字符串中刪除所有CSS偽選擇器（ ":something" ）？

Answer 1

您可以使用正則表達式刪除它們並replace ：

selector = selector.replace(/::?[^ ,:.]+/g, '');

（ ::?表示一個或兩個冒號[您也可以將其寫為:{1,2} ]，以處理::after等； 完整的正則表達式說明 。）

在大多數情況下都可以使用，但是如果您的嵌套偽類非常復雜，例如foo.bar:not(.baz:active) （.baz： foo.bar:not(.baz:active) （將在CSS4中使用），則需要一個實際的CSS選擇器解析器來正確處理它們。 雖然你很可能建立一個正則表達式的交替，將處理嵌套一個比特，理論上可以有多個嵌套，這是其中一個解析器的用武之地。

但是請注意，其中一些偽元素確實會影響選擇哪個元素，例如:nth-child ，因此，如果您的目標是查看DOM中是否存在匹配的元素，則不要刪除這些元素。 因此，您可能希望采用相當實用的方法，以一系列交替的方式列出要刪除的內容，例如：

var toRemove = /:hover|:active|:before|:after|::?before|::?after|:and-so-on/g;
// ...
selector = selector.replace(toRemove, '');

並沒有那么多，它消除了刪除重要結構行:nth-child 。

Answer 2

刪除所有偽選擇器將無法解決您的問題。

舉個例子：

p:first-child {}

<div>
    <div></div>
    <p></p>
</div>

由於該段不是第一個子段（除非DOM更改，否則不會是第一個子段），因此從選擇器中刪除:first-child將為您提供錯誤的肯定匹配。

您只需要刪除以鼠標或鍵盤交互以及偽元素為條件的偽類。 然后，需要特殊情況:link和:visited以便匹配鏈接的匹配錨而不是非匹配錨（用[href]的屬性選擇器替換它們是一種天真的方法，但對於所有對象都應該足夠好實用）。

您還需要為:enabled和:disabled做出決定。 它們不會通過用戶交互進行更改，但是如果您打算使用JS進行切換，則可能需要刪除它們。

由於這里有很多條件，因此我將為此編寫一個函數，而不是嘗試簡單的正則表達式。