What is Visual Selector?

Distill provides a Visual Selector toolbar that you can use to make selections from a webpage visually. Once those selections are made and saved in to Distill, Distill will monitor them at the set check interval.

Distill supports three types of selectors, XPath, CSS, and JavaScript that can be used to create . By default, Distill creates CSS selectors (XPath in case of browser extensions) upon visual selections. You can change the selector to the other in case you want to create a selector of your own.

The toolbar is loaded at the top (bottom in case of browser extensions). Following image shows the toolbar.

Visual Selector - Distill Web Monitor

How to use Visual Selector?

Step 1: Click on “Add Webpage” from the Watchlist.

Step 2: In Source, enter the URL that you want to watch for changes.

Step 3: Switch on the “Visual selector” button and select elements visually. You can select multiple elements.

Step 4: Once selections are made, click on “save” button.

How to remove elements from the selection to ignore monitoring?

You can make selections inside a selection to de-select elements. De-selected elements are not considered for monitoring.

Selected elements are enclosed in a blue box while de-selected elements are shown in red box.

selection and de-selection

How to use Text filter in Visual Selector?

Distill supports Regular expression filter. If you want to extract texts from the selected text, you can use text filter from the visual selector toolbar. It comes handy when you want to extract parts from the text that can not be selected visually.

To use text filter, first make a selection and then click on “Settings” icon to expand and view the available options. Then you can add your text filter.

For example, you want to select all digits before decimal, you can add text filter as \d+,?\d* as shown in the image below. You can notice that the selection reads as 3,295.47. With text filter, 3,295 has been extracted (as shown in text preview) and digits after decimals have been ignored for monitoring.

regex filter

Please note that Regex in Distill is in JavaScript. gim are flags. You can set the flags as per your requirement. By default, all flags are set.

The flags have following description:

g: Perform a global match. If set, it will find all matches and will not stop after the first match. You can use this if there are multiple selections and you want to apply same text filters for all.

i: Perform case-insensitive match.

m: Perform multiline matching.

If you want to check and test your regex filter, you can use any of the regex tester sites available online to add a valid text filter into Distill.