Search in Page with RegEx + Highlight All

[tellu-white]

On large web pages ( e.g., https://github.com/yt-dlp/yt-dlp ), it is difficult to find the desired information using only the "Find" functionality offered by Pale Moon in the "Find Toolbar." For this reason, I've made the "Search in Page with RegEx" add-on, which allows you to search the web page using "Regular Expression."

This add-on adds a RegEx Button next to the "findbar-textbox" in the "Find Toolbar". This button uses the same "findbar-textbox" used in Pale Moon's standard searches to enter the RegExp used in the search.

After a RegExp search, the results that would also be highlighted by Pale Moon (if successive searches would be made with all the results highlighted by RegExp) are highlighted. In addition, RegExp also returns non-highlighted results that represent text that spans multiple lines on the web page.

There is an option to display all these results (highlighted + non-highlighted) in a new TAB - see Screenshots:

01.png

02.png

03.png

04.png

05.png

06.png

07.png

08.png

09.png

***

Download link ( Search in Page with RegEx 3.3 ):

https://www.mediafire.com/file/hpyzn9xjyfbnbtz/search_in_page_with_regex_3_3.zip/file

[Gemmaugr]

Would this not only extend the Find functionality, but also replace it? If so, would it be possible to use CTRL+F to not only open it, but also close it as well? A feature I've long been missing.

[tellu-white]

Would this not only extend the Find functionality, but also replace it?

This add-on neither extends nor replaces Pale Moon's "Find" functionality, instead it adds a new functionality: search in page with RegEx. The add-on uses the "findbar-textbox" from Pale Moon's "Find Toolbar" to keep from creating a redundant "Find" text box.

[Michaell]

It would be good if you could add a compose regex popup that would let users who don't know regex enter simple terms and create the regex from that. But if that complicates the extension too much, I guess there are webpages to do that but I haven't searched for any. Maybe some local standalone exe's too. Simple stuff like AND, OR, NOT. Maybe I'll try to relearn a few useful regex symbols/codes. I do like the "*" function.

[tellu-white]

It would be good if you could add a compose regex popup that would let users who don't know regex enter simple terms and create the regex from that. But if that complicates the extension too much, I guess there are webpages to do that but I haven't searched for any.

Creating RegEx is a complex topic that requires a completely different approach than the one used in this add-on. This add-on is for users who have at least a basic knowledge of RegEx. For those interested in learning RegEx (patterns), I will post some links to pages (websites) that can offer a good starting point (the JavaScript code should be ignored - it is not required in order to use this add-on):

https://www.tutorialrepublic.com/javascript-tutorial/javascript-regular-expressions.php

https://lia.disi.unibo.it/materiale/JS/developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.html

https://www.regular-expressions.info/quickstart.html

Links for online RegEx Testers:

https://linangdata.com/regex-tester/

https://extendsclass.com/regex-tester.html

[Moonchild]

If you need help creating and testing regexes (and are on Windows), I found "RegexBuddy" to be very useful and definitely worth the very reasonable support for the dev putting it out there if you can spare the cash.

[tellu-white]

This add-on uses the "findbar-textbox" from Pale Moon's "Find Toolbar" to enter RegEx. This approach has the advantage of not creating a redundant "Find" box, but it also has two disadvantages:

1. Usually, the width of the "findbar-textbox" in Pale Moon's "Find Toolbar" is too small to visualize the RegEx reasonably well.

2. The background of the "findbar-textbox" changes from white to red when Pale Moon cannot find the searched string on the page. Since a RegEx contains groups of special characters that are not found on page, the background of the "findbar-textbox" turns red as soon as these characters are entered, making it visually difficult to continue developing a RegEx directly in Pale Moon's "Find Toolbar".

I chose to solve these problems with CSS code added to "userChrome.css" file. This way, I increased the width of the "findbar-textbox" and blocked the background from changing from white to red when special characters are added to RegEx (which are not found on page). The fact that the "findbar-textbox" background always remains white is not a major impediment even when using the default search in Pale Moon. If the searched string is not found on page, Pale Moon will display the message "Phrase not found" in "Find Toolbar" (if not, click the "Next" button to display the search result message).

The CSS code below can be customized by each user according to personal preferences:

Code: Select all

/* Find Toolbar - Search in Page with RegEx */

#FindToolbar{
	height: 26px !important;
	max-height: 26px !important;
	margin: 0px !important;
	padding: 2px 1px 1px 1px !important;
}

#FindToolbar .findbar-textbox{
	height: 20px !important;
	max-height: 20px !important;
	margin-top: 3px !important;
	padding: 0px 2px 2px 2px !important;
	background: #ffffff !important;
}

#FindToolbar .textbox-input-box{
	min-width: 450px !important;
	max-width: 450px !important;
	color: #0482b8 !important;
	background: #ffffff !important;
	font-size: 14px !important;
}

#btn_search_with_RegEx{
	margin: 2px 3px -2px 0px !important;
}

#FindToolbar .found-matches {	
	font-weight: bold !important;
	color: #0482b8 !important;
	background: unset !important;
}

/********************************************/

Screenshots:

A. Before using the CSS code:

01.png

02.png

B. After adding the CSS code to "userChrome.css" file:

03.png

04.png

05.png

06.png

07.png

[Bilbo47]

Links for online RegEx testers

Also
https://regexr.com
https://RegEx101.com <== ick in PM
and
http://www.jasinskionline.com/Technical ... mples.ashx