Generating clean URLs with javascript

In a recent project I needed to generate clean search urls on a form submit. There are basically two ways to do that. One is to post the search variables to the same page, and generate a clean url using PHP and then redirect it to the new url. The other way is to generate clean urls using JavaScript and immediately direct the page to the new url. This saves some processing on the server and one redirection, and also allows us to generate a url without a page refresh. I decided to go with the JavaScript solution.

A rough idea of the first option is given below.

if(isset($_GET['search'])) {
   $clean_url = '';
   // code to create a clean url. 
   // After that $clean_url will contain the new redirect url 
   header("Location: $clean_url");
   exit();
}
<form class="myForm" action="#" method="get">
    <input type="text" id="search" name="search" maxlength="100">
    <input id="submit" name="submit" type="submit" value="Search">
</form>

The problem with the first option is that you cannot generate a clean url without refreshing the page. This can be problematic if your application requires you to generate clean urls without going back to the server (which entails a page refresh).

So for example if on form submission you have some ugly urls like the following.

http://mysite.com/search.php?keyword=blue+boxed+buttons

You can generate clean urls like the following on the client and then send it to the server.

http://mysite.com/search/blue-boxed-buttons

The basic search form is shown below.

<form class="myForm" action="#" method="get">
    <input type="text" id="search" name="search" maxlength="100">
    <input id="submit" name="submit" type="submit" value="Search">
</form>

Now the following code will handle the clean url generation on the above form submission. It will intercept the form submission, generate a clean url, and direct the page to the new url, all without a page refresh.

/* Friendly URL rewrite */
$("form").submit(function() {
    /* Remove unwanted characters, only accept alphanumeric and space */
    var keyword = $('#search').val().replace(/[^A-Za-z0-9 ]/g,'');
 
    /* Replace multi spaces with a single space */
    keyword = keyword.replace(/\s{2,}/g,' ');
 
    /* Replace space with a '-' symbol */
    keyword = keyword.replace(/\s/g, "-");
 
    var cleanUrl = 'http://mysite.com/search/' + keyword.toLowerCase();
    window.location = cleanUrl;
 
    return false;  // Prevent default button behaviour
});

Below is the Apache htaccess rule to go along with the above redirection. Our main search page is called ‘search.php’.

RewriteEngine on
RewriteBase /
RewriteRule ^search/([A-Za-z0-9-]+)/?$ search.php?keyword=$1 [NC,L]


2 thoughts on “Generating clean URLs with javascript

  1. No, this does not entail an extra page submit. A clean url is already created using JavaScript, and the htacces rules helps to correctly convert to the php server side pages and parameters.

Comments are closed.