Jump to content

Problem While Creating An Internal Search Engine...


Eyad Syria-lover

Recommended Posts

So,I'am Creating An Internal Search Engine Which Can Be Used To Search For A Specific Word In The Page You're Browsing.

This Engine Makes The Background Color Is Yellow For The Word You're Searching.

 

<!--Taken From W3Schools.com-->

 

<p>

The display property sets or returns the element's display type.

 

Elements in HTML are mostly "inline" or "block" elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.

</p>

 

<p>

The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

 

Tip: If an element is a block element, its display type can also be changed with the float property.

</p>

 

<script>

var i;

function searchFor(keyword)

{

for (i=0;i<document.querySelectorAll("p").length;i++)

{

document.querySelectorAll("p").innerHTML=document.querySelectorAll("p").innerHTML.replace(/keyword/gi,"<span style='background-color:yellow;'>"+keyword+"</span>");

}

 

 

searchFor("display");

 

</script>

 

How Can I Make It Possible To Pass A String As A Parameter To The searchFor() Function?

Link to comment
Share on other sites

Use text input, with anchor element, or input type button, or button element, when any of these are clicked disable default action (go to href url link, submit etc), get text input value and use as argument used as keyword of function.

I'am Sorry Sir,Maybe I've Asked In Such A Way That Was In-Appropriate.

How Can I Pass A Variable In A Regular Expression?

Link to comment
Share on other sites

You have to use the constructor to create the regexp:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

 

Also, instead of calling document.querySelectorAll so many times, you should only call it once and save the results. If you have 10 p elements on the page then you're going to call document.querySelectorAll 21 times looking for the same thing. There's no reason to do that, just call it once.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...