hide-if-matches-computed-xpath

The hide-if-matches-computed-xpath hides specific element whose class name or ID changes in runtime through a dynamically-built XPath query.

This snippet takes as a first parameter an XPath selector that's incomplete, due to a placeholder in the form {{}}. The next parameters, searchQuery and searchRegex, tell the snippet how to fill the placeholder.

You can use hide-if-matches-computed-xpath to:

Hide elements whose classes or IDs are randomized when a page refreshes
Hide elements that write flexible queries to take stylesheets, inline scripts, and regex into account
Hide elements that change at runtime

Always use double quotes instead of single quotes inside selectors. Though both are valid, eyeo uses single-quotes to enclose the selector as part of the filter syntax.

Parameters

Name Description Mandatory

Name	Description	Mandatory
query	The template XPath query that targets the element to hide. Use `{{}}` to dynamically insert into the query.	Yes
searchQuery	The XPath query that searches for an element to be used alongside searchRegex.	Yes
searchRegex	The regular expression used to extract text from the innerHTML of the element that matches searchQuery. The extracted text gets injected into the query.	Yes
waitUntil	An optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts `loading`, `interactive`, `complete`, `load` or any event name.	No

query

The template XPath query that targets the element to hide. Use {{}} to dynamically insert into the query.

Yes

searchQuery

The XPath query that searches for an element to be used alongside searchRegex.

Yes

searchRegex

The regular expression used to extract text from the innerHTML of the element that matches searchQuery. The extracted text gets injected into the query.

Yes

waitUntil

An optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts loading, interactive, complete, load or any event name.

Filter examples

The following table lists examples that use the hide-if-contains-and-matches-style snippet:

Filter Result

Filter	Result
`hide-if-matches-computed-xpath '//[@class="{{}}"]' '//div[@id="target"]' '/./'`	Hides all elements with a class whose name matches any string in the div with an `id="target"`.
`hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/./'`	Hides all elements that contain the text `Sponsored` with a class whose name matches any string in the div with an `id="target"`.
`hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/test(.)test/' interactive`	Hides all elements that: contain the text `Sponsored` with a class whose name matches any string that starts with `test`, followed by any sequence of characters end with `test` in the `div` with an `id="target"` This filter runs when the document state is interactive.

hide-if-matches-computed-xpath '//[@class="{{}}"]' '//div[@id="target"]' '/./'

Hides all elements with a class whose name matches any string in the div with an id="target".

hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/./'

Hides all elements that contain the text Sponsored with a class whose name matches any string in the div with an id="target".

hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/test(.)test/' interactive

Hides all elements that:

contain the text Sponsored
with a class whose name matches any string that starts with test, followed by any sequence of characters
end with test in the div with an id="target"

This filter runs when the document state is interactive.

Debugging

The following table contains messages you'll find useful during debugging:

Message When the error occurs Definition

Message	When the error occurs	Definition
`No query or searchQuery provided`	Right after the snippet fires	Mandatory parameters are missing; double check your filter.
`Started searching for <<searchQuery>`	When the snippet begins to look for the `searchQuery`	A node is searched for to find the string that matches the regular expression.
`Found node: <<searchNode>>`	When a node matches the `searchQuery`	A node element was found that will be used to find the string that matches the regular expression.
`Searching in <<searchNode.innerHTML>>`	After `searchQuery` finds a matching node	A node search was matched by the `searchQuery` for a string that matches the regular expression to fill the XPath query.
`Matched search query: <<foundText>>`	After comparing the text inside the `<<searchNode>>` against the regular expression	A string was found that matches the regular expression. This string will be used to fill the XPath query.
`Starting hiding elements that match query: <<computedQuery>>`	After the placeholder in the XPath query has been replaced with the `<<foundText>>`	The snippet has filled the placeholder and is looking for HTML elements that match the computed XPath query.
`Matched: <<HTML element>> for selector: <<query>>`	Right after an HTML element has been matched and hidden	The snippet has successfully matched and hidden a HTML element.

No query or searchQuery provided

Right after the snippet fires

Mandatory parameters are missing; double check your filter.

Started searching for <<searchQuery>

When the snippet begins to look for the searchQuery

A node is searched for to find the string that matches the regular expression.

Found node: <<searchNode>>

When a node matches the searchQuery

A node element was found that will be used to find the string that matches the regular expression.

Searching in <<searchNode.innerHTML>>

After searchQuery finds a matching node

A node search was matched by the searchQuery for a string that matches the regular expression to fill the XPath query.

Matched search query: <<foundText>>

After comparing the text inside the <<searchNode>> against the regular expression

A string was found that matches the regular expression. This string will be used to fill the XPath query.

Starting hiding elements that match query: <<computedQuery>>

After the placeholder in the XPath query has been replaced with the <<foundText>>

The snippet has filled the placeholder and is looking for HTML elements that match the computed XPath query.

Matched: <<HTML element>> for selector: <<query>>

Right after an HTML element has been matched and hidden

The snippet has successfully matched and hidden a HTML element.

Other resources

Last updated 9 months ago