Javascript find a string on a page. Search on a page using javascript

A couple of days ago I received a test task from the company for the Front-end dev vacancy. Of course, the task consisted of several points. But now we will talk about only one of them - organizing a page search. Those. a banal search using the text entered in the field (analogous to Ctrl+F in a browser). The peculiarity of the task was that the use of any JS frameworks or libraries is prohibited. Everything is written in native JavaScript.

Searching for a ready-made solution First thought: someone has already written exactly this, you need to google it and copy-paste it. So I did. Within an hour, I found two good scripts that essentially worked the same way, but were written differently. I chose the one whose code I understood better and pasted it into my homepage.

If anyone is interested, I took the code.

The script worked immediately. I thought that the issue had been resolved, but as it turned out, no offense to the author of the script, there was a huge flaw in it. The script searched the entire contents of the tag... and, as you probably guessed, when searching for any combination of characters that resembled the tag or its attributes, the entire HTML page would break.

Why did the script not work correctly? It's simple. The script works as follows. First, we write the entire contents of the body tag into a variable, then we look for matches with a regular expression (set by the user when entering into the text field) and then we replace all matches with the following code:

...match found...
And then we replace the current body tag with the new one received. The markup is updated, the styles change, and all found results are highlighted in yellow on the screen.

You probably already understood what the problem is, but I’ll still explain in more detail. Imagine that you entered the word “div” into the search field. As you can imagine, there are many other tags inside body, including div. And if we apply the styles indicated above to all the “divs”, then it will no longer be a block, but something incomprehensible, since the design breaks. As a result, after rewriting the markup, we will end up with a completely broken web page. It looks like this.

As you can see, the page is completely broken. In short, the script turned out to be non-working, and I decided to write my own from scratch, which is what this article is dedicated to.

So we write a script from scratch. This is how everything looks for me.

Now we are interested in the search form. I circled it with a red line.

Let's figure it out a little. I implemented it as follows (pure HTML for now). Form with three tags.

The first one is for entering text;
The second is for canceling the search (deselect);
The third is for searching (highlight the results found).

So, we have an input field and 2 buttons. I will write JavaScript in the js.js file. Let's assume that you have already created and connected it.

The first thing we’ll do is write down function calls when the search button and the cancel button are clicked. It will look like this:

Let me explain a little what is here and why it is needed.

For the text field we give id="text-to-find" ( using this id we will access the element from js).

We give the cancel button the following attributes: type="button" onclick="javascript: FindOnPage("text-to-find",false); return false;"

- Type: button
- When clicked, the FindOnPage("text-to-find",false) function is called. and passes the id of the text field, false

We give the search button the following attributes: type="button" onclick="javascript: FindOnPage("text-to-find",true); return false;"

- Type: submit (not a button because here you can use Enter after entering a field, but you can also use a button)
- When clicked, the FindOnPage("text-to-find",true) function is called. and passes the id of the text field, true

You probably noticed one more attribute: true/false. We will use it to determine which button was clicked (cancel search or start search). If we click cancel, we pass false . If we click on search, we pass true .

Okay, let's move on. Let's move on to JavaScript We will assume that you have already created and connected the js file to the DOM.

Before we start writing code, let's take a step back and first discuss how things should work. Those. In essence, we will write down an action plan. So, we need the page to be searched when entering text in a field, but tags and attributes cannot be touched. Those. only text objects. How to achieve this - I'm sure there are many ways. But now we will use regular expressions.

So the following regular expression will only search for the following text. like: ">... text...