Tag: regular expression

Custom routes – Htaccess tutorial

Posted on by adnanafzal565

In this htaccess tutorial, you will learn how to create custom routes. You will also learn how you can prevent file listing using htaccess.

Video tutorial:

You need to create a file named “.htaccess” (note the dot at the start) at the root of your project. To prevent directory listing, write the following line in the “.htaccess” file.

Options -Indexes

Before using any routing rules and conditions, we must first activate them. Write the following line to activate the rewrite rules.

Options -Indexes
RewriteEngine On

Then we need to make sure the requests do not match any directory, file name, or symbolic link.

The following line checks if the requested file name is not a directory.

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d

The following line checks if the requested file name is not a file.

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

The following line checks if the requested file name is not a symbolic link.

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l

Example 1:

Now, let’s say you want to redirect all the requests from the “users/list” route to the “users-list.php” file. You can do that by adding the following line in your htaccess file.

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^users/list$ users-list.php [L]

^ means the start of the string.

$ means the end of the string.

[L] means to stop looking for more RewriteRule if this condition matches.

Example 2:

Now let’s say you want to redirect all requests from the “users/fetch/1” route to the “user-by-id.php” file. Here, the last “1” is the parameter you want to send. Now to redirect the request to the file, you need to add the following rule:

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^users/list$ users-list.php [L]
RewriteRule ^users/fetch/([0-9]+)$ user-by-id.php?id=$1 [QSA,L]

([0-9]+) will match for any integer number.

?id=$1 means that it will send the parameter named “id“, with the value matched from the previous regular expression, to the file “user-by-id.php“.

QSA (Query String Append) will make sure to append the existing query string (if any) while preserving the additional parameters (id=1 in this case) to the URL.

Then in the “user-by-id.php” file, you can get the ID using the following code:

<?php

echo $_GET["id"];

?>

Example 3:

For instance, if you want to redirect the URL “users/fetch/adnan” (‘adnan’ is the argument) to the file “user-by-name.php“, you can do that by adding the following rewrite rule.

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^users/list$ users-list.php [L]
RewriteRule ^users/fetch/([0-9]+)$ user-by-id.php?id=$1 [QSA,L]
RewriteRule ^users/fetch/([a-zA-Z\s-]+)$ user-by-name.php?name=$1 [QSA,NC,L]

([a-zA-Z\s-]+) This regular expression will match all alphabets, including multiple words, letters, spaces, and hyphens.

NC This flag will make the match case insensitive.

Then in the “user-by-name.php” file, you can get the name using the following code:

<?php

echo $_GET["name"];

?>

Following is the complete code of the “.htaccess” file.

Options -Indexes
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^users/list$ users-list.php [L]
RewriteRule ^users/fetch/([0-9]+)$ user-by-id.php?id=$1 [QSA,L]
RewriteRule ^users/fetch/([a-zA-Z\s-]+)$ user-by-name.php?name=$1 [QSA,NC,L]

Download:

custom-routes-htaccess.zip

If you are running on HTTP, you can make your web server redirect the HTTP requests to HTTPS following this tutorial.

I also created a simple and lightweight PHP MVC framework using this htaccess rewrite condition. You can check it out here.

This concludes our htaccess tutorial on creating custom routes. If you face any issues with this, kindly let me know.

Split camel case using regex in Javascript

Posted on by adnanafzal565

Hello. In this post, we will show you, how you can split a camel case word and capitalize it using regex (regular expression) in Javascript.

InputOutput
adnanTechComAdnan Tech Com

Following code will split the camel case into multiple words and then capitalize it:

// splitting camel case to multiple words
const str = "adnanTechCom".replace(/([a-z])([A-Z])/g, "$1 $2")

// capitalizing the string
const capitalize = str.charAt(0).toUpperCase() + str.slice(1)
console.log(capitalize)

capitalize variable will now have value:

Adnan Tech Com

This regular expression will search for all words that ends with small letter and begin with capital alphabet. Then give a space between each of such word.

The above replace call replaces the match of the regex (which happens to match everything) with the first capture group ($1) followed by a space, followed by the second capture group ($2).

For capitalization, you can also use a CSS property as well:

text-transform: capitalize;

Count words as user type – Textarea & Javascript

Posted on by adnanafzal565

Demo

In this tutorial, we are going to teach you how you can count the number of words in textarea as user type in it. The first thing you need to do is to attach an onkeyup listener to your textarea tag. This function will be called whenever user pressed the key. Specifically, when the user’s finger is moving upwards after pressing the key, then this event is called. In this function, we are passing a parameter this means current node, which is textarea tag.

<textarea onkeyup="countWords(this);"></textarea>
<span id="words-counter"></span>

Then we created a span tag, you can create a div or paragraph as well. Give that span tag a unique ID so it can be accessible in Javascript. We will be displaying the number of words in this span tag.

Then we create this function in Javascript, first, we are getting the current text inside textarea field using the value attribute. Then we are applying a regular expression which states that:

Count the number of words
separated by spaces.

This will return an array, we simply have to calculate the length of that array. We are using a ternary operator to get value as 0 if the spaces array is null. Finally, we are displaying that length in the span tag using plain Javascript.

function countWords(self) {
	var spaces = self.value.match(/\S+/g);
	var words = spaces ? spaces.length : 0;

	document.getElementById("words-counter").innerHTML = words + " words";
}

That’s how you can count the number of words as user type in an input field using plain HTML and Javascript.Specifically in a <textarea> tag.