hide-if-contains-visible-text

The hide-if-contains-visible-text snippet hides any HTML element that matches a CSS selector if the element's visible text content contains a given string. It can also check an unlimited amount of CSS attributes of a node to locate a specific string, even when a website employs methods to obscure or conceal the text.

Parameters

Name	Description	Mandatory
search	The string to match to the visible text. The text is considered visible text assuming it's not hidden by CSS properties or other means. If the string begins and ends with a slash (/), the text in between is treated as a regular expression.	Yes
selector	The CSS selector that an HTML element must match for it to be hidden.	Yes
searchSelector	The CSS selector that an HTML element containing the given string must match; defaults to the value of the selector argument.	No
optionalParameters	You can provide any number of optional parameters. There are 2 kinds of optional parameters: [1] tuning text matching logic or [2] adding arbitrary CSS attributes. There are some circumvention techniques that might mess with the string matching logic. This snippets has logic that determines which text is visible and which is not. This logic can be tuned by overriding the default parameters (see table below). You can provide additional CSS rules to help filter out HTML elements, thereby minimizing false positives. These CSS attributes should align with the computed styles of the HTML elements responsible for obfuscating the string. If the string you are attempting to match is not obfuscated, there's no need to include optional parameters. The snippet already verifies certain CSS values (as indicated in the table below). The optional parameters need to follow these syntax rules: key:value, where can be a string or a regex (if it starts and ends with a /) each parameter is wrapped in single quotes, for example: '-snippet-box-margin:10px' 'width:0px'	No

Default Parameters

In order to tackle common circumvention patterns, the snippet checks already some styles in the matched element, even if you don't add any optional parameter. You can see the default values in the "Default value" column.

Note that you can override the default parameters by adding them as optional parameter, following the syntax rules explained above. You can give any value, the "How to overwrite" column shows only examples. Adjust the values according to your needs.

Name	Description	Default Value	How to overwrite
-snippet-box-margin	Used to expand the bounding box of the overflow parent. This is useful if the website is pushing some elements outside of a overflow:hidden parent. Unit is pixels.	'-snippet-box-margin:2'	'-snippet-box-margin:10'
-disable-bg-color-check	Used to disable the check where we categorize elements with the same text color and background color as "not visible".	'-disable-bg-color-check:false'	'-disable-bg-color-check:true'
-check-is-contained	Used to categorize elements that are pushed outside of a parent even if the parent does not have the style overflow:hidden.	'-check-is-contained:false'	'-check-is-contained:true'
-pseudo-box-margin	Used to set the pseudo elements (:before , :after etc.) translate threshold. Any pseudo elements that have a transform(translate) value higher than this threshold will be counted as invisible. Unit is pixels.	'-pseudo-box-margin:2'	'-pseudo-box-margin:0'
opacity	Used to check if the gibberish text that scrambles the string we are looking for is contained in a transparent element.	'opacity:0'	'opacity:1'
font-size	Used to check if the gibberish text that scrambles the string we are looking is made invisible by the font-size.	'font-size:0'	'font-size:10'
color	Used to check if the gibberish text that scrambles the string we are looking is made invisible by the font color.	'color:rgba(0, 0, 0, 0)'	'color:rgba(255, 99, 71, 0.6)'

Filter examples

The following table lists examples that use the hide-if-contains-visible-text snippet:

Filter	Result
hide-if-contains-visible-text FAQ nav	Hides any nav element whose visible text content contains the word FAQ. The word FAQ doesn't need to be found inside the direct children of the nav element; it can be anywhere in its subtree.
hide-if-contains-visible-text FAQ nav a	Hides any nav element that has an a element inside its subtree whose visible text content contains the word FAQ.
hide-if-contains-visible-text /.*/ li.serp-item 'li.serp-item div.label'	Hides any li.serp-item element which has an 'li.serp-item div.label' element inside its subtree whose visible text content matches the /.*/ regex.
hide-if-contains-visible-text /.*/ li.serp-item 'li.serp-item div.label' 'color:rgb(255, 255, 255)'	Hides any li.serp-item element which has an li.serp-item div.label element inside its subtree whose visible text content matches the /.*/ regex and whose font color is not white.