在CSS選擇器中轉義雙引號

Question

我有一個html標簽，

<div style="background-image: url("resources/images/test.jpg");"/>

我想使用CSS選擇器定位此元素。 我在選擇器下面嘗試過，但是它拋出錯誤，

document.querySelector('*[style*="background-image: url("resources/images/test.jpg")"]')

Error: DOM Exception: SYNTAX_ERR (12)

我必須以某種方式在“ resources / images / test.jpg”周圍轉義雙引號。 請讓我知道是否仍然可以將其轉義並定位標記。

Answer 1

問題不僅存在於選擇器字符串中，還存在於標記中。 url()值中的引號會干擾style屬性值，從而導致HTML無效。 （ />位置也是無效的，但這並不重要。）

由於您要處理url()值，因此可以簡單地刪除引號：

<div style="background-image: url(resources/images/test.jpg);">

然后相應地修改選擇器：

document.querySelector('*[style*="background-image: url(resources/images/test.jpg)"]');

另外，我強烈建議嘗試以其他方式標識元素，例如通過使用類或基於標記的結構構造選擇器，而不是針對脆弱的style屬性。 如果仍然需要測試此樣式，則只需在選擇元素后使用window.getComputedStyle()來查詢元素的計算樣式，因為很有可能會使用內聯樣式。

如果您無法編輯標記，而您在問題中給出的正是標記的顯示方式，那么很遺憾，標記無效，即使使用有效的選擇器，也無法匹配該元素。

---

如果絕對必須在url()值中使用雙引號，則可以選擇以下幾種方法：

• HTML編碼內引號：

   <div style="background-image: url(&quot;resources/images/test.jpg&quot;);"> 

• 或將外部雙引號替換為單引號，這樣就無需對HTML進行編碼：

   <div style='background-image: url("resources/images/test.jpg");'> 

要在屬性選擇器中使用雙引號，請執行以下操作：

• 您需要對它們進行兩次轉義：一次是用於選擇器，另一次是為了不破壞JavaScript字符串：

   document.querySelector('*[style*="background-image: url(\\\\"resources/images/test.jpg\\\\")"]'); 

• 另外，您也可以如上所述交換引號，盡管您仍然需要對內部雙引號進行一次轉義，以便它們不會破壞字符串：

   document.querySelector("*[style*='background-image: url(\\"resources/images/test.jpg\\")']"); 

您還可以在url()值中使用單引號，在這種情況下，您需要按照上述步驟操作，並根據需要交換引號（除非不需要對HTML進行編碼）。 但是正如您所看到的，它非常復雜； 如果您可以編輯標記，老實說，我會完全刪除引號，並避免所有這些。

Answer 2

嘗試這樣做：

<div style="background-image: url(resources/images/test.jpg);"></div>

您不需要在圖像的文件路徑周圍加上引號

Answer 3

您不需要使用引號，但是，如果需要使用引號，則始終可以使用單引號'

Answer 4

HTML中顯示的div標簽不受我的控制，因此我無法刪除url中的引號。 無論如何，選擇器下面基於@Pedro的評論對我有用，

document.querySelector("*[style*='background-image: url(\"resources/images/test.jpg\")']")

我正在用Selenium編寫腳本，因此有必要根據圖像源確定圖像div。