Search feature on static HTML sites – The smart way

You all must have stumbled on static HTML sites. Either you created them or you found them around. The purpose of those sites today is simplicity. Not everybody needs dynamic content and thus not everybody needs complex CMS’s with huge back end administration panel. So, what is more easy than putting together a few simple HTML pages. But what if you want to incorporate a search feature into that? Well, when a developer first thinks of search, the second thing that hits his mind is “database“. If you fall for that, then there goes simplicity and fast loading. You are already on a war path.

I’ve been challenged to that and here is what i came up with. I created a small PHP script that actually searches the HTML files! The simplicity in the thought is what makes me happy about this. You just get a search term, open the HTML files up, pattern match for it and then echo the results with links back to the original static files. So, you have a dynamic search feature with static content! And what’s even better is that if you make any changes in the HTML files, those will be reflected on your search just like it would happen using the classic database way.

I have created the script and included it with a small example here: Dynamic search for static HTML (5870) The only requirements to run this example is a web server with PHP installed. Here is how to check it out:

  • Download and extract the folder “search_test” into a place accessible from the web.
  • Hit the URL “http://place.of.folder/search_test/search.php?s=ipsum

As you can see, the above URL will search for “ipsum” in the .htm and .html files and show you the results. If you want to play a little bit with the parameters of the script you can open it and check the global variables on the top (recursive search, highlight etc).

One thing that could be improved is cached search. This would decrease the load on the server for each search. I can help you do it if you need to. I just didn’t go on with it because i didn’t want to over-complex my script.

As you can imagine, this is just the skeleton of the script. You should configure it to fit your needs. If you have any problems or need any help don’t hesitate to leave a comment or contact me!

EDIT: I forgot to mention that this will work for text that is wrapped around a “<p>” (paragraph) tag. In order to make it work with more or be more flexible, you will need to edit the regular expression at the “preg_match_all” call on the script.

8 Responses to “ “Search feature on static HTML sites – The smart way”

  1. Very nice Stratos 🙂 It’s been so long since I’ve worked with a static site that I forgot that they don’t have an easy way to search them. Would the script work ok if .shtml was added to the array at the beginning?

  2. stratosg says:

    @Kim: You can add any filetype the way the .html and .htm are added, just comma separate a quote included value 😉 I know it’s hard to stumble on static sites these days but when requirements are simple tools should be simple too.

  3. Simon says:

    This is great. Thanks so much for sharing it!

  4. Thuy says:

    Hi, Thanks for your code, I am using it for my website. Just 1 thing, The search result include the value of tag. Ex: I search for “an” the result include the “an>” (). How can i ignore the html tag in search result? Sorry as I am not good in this code. Thanks again. Thuy

  5. stratosg says:

    @Thuy: I am not sure what the problem is. If you want you can email me with your problem…

  6. Mohamad says:

    man you ROCK …. you made me a happy day ….

  7. Mohamad says:

    hey … I appreciate any help in the following issue,
    I need to disable the ability of opening any link of the results in a new tab or window. In my other HTML pages, I am using javascript button and it is working fine, but can I alter the above code so that it views javascript buttons instead of hyperlinks ?

    I hope this is not too weird ….
    thank you in advance

  8. Pixelate says:


    The search result includes the value of html tags. i.e. It also searches the alt attribute and other attributes of img tags (</img) since they can be within a tag.

    As a result HTML strings are in the search results.

    The script should only search for plain text and avoid HTML tags. Do you think this would be possible?

    Great script btw!

Leave a Reply