How to check for an empty string in JavaScript

17th February 2018 by Rob Salmon

There are many occasions when you might need to check if a supplied string contains any text. For example when you need to check if a user has entered any text in a form field. Here’s how you can check:

First, let’s me define exactly what I mean by ’empty’. By ’empty’ I mean that the string could:

  • be undefined (i.e. the proposed string variable has been defined but not yet set)
  • be null (the proposed string has been assigned no value)
  • be blank (contains no characters)
  • contain only white space.

How to check if the string variable is undefined

You can check if a string variable is undefined using JavaScript’s global undefined property:

var potentialString;
if (typeof potentialString === "undefined") { 
 return 'Undefined value!';
}

How to check if the string variable is null

You can check if the string variable is null using JavaScript’s primitive value null:

var potentialString;
if (potentialString === null) { 
 return 'null value!';
}

How to check if the string variable is blank

You can check is a string is blank by either 1. comparing to a empty string literal or 2. checking that the string’s length:

var blankString = '';
 
// 1. Checking by comparing to an empty string literal
if (blankString === '') { 
 return 'empty string!';
}
 
// 2. Checking that string length is zero
if (blankString.length === 0) {
return 'string length is zero';
}

Both effectively check if the length of the string is zero.

Combining checks for undefined, null and blank strings

You can combine all the aforementioned checks as follows:

if (stringValue === null || stringValue === undefined || stringValue.length === 0) {
return 'string is is either null, undefined, empty or blank';
}

However since all of the aforementioned would return true, we could rewrite the above more succinctly as follows:

if(!stringValue) {
return 'string is is either null, undefined, empty or blank';
}

How to check if the string only contains whitespace

In newer browsers you can check if the string only contains whitespace by checking if it is empty once the string has been trimmed using the trim function. (You will need to use the polyfill for older browsers):

var stringWithWhiteSpace = ' ';
if (!stringWithWhiteSpace.trim()) {
return "String is empty!";
}

Combining both checks

The final version of the check should like this:

var stringWithWhiteSpace = ' ';
 
if(!stringWithWhiteSpace || !stringWithWhiteSpace.trim()) {
return "This is an empty string!";
}

How to create a custom 404 ‘page not found’ error page in Apache

19th November 2017 by Rob Salmon

A 404 HTTP error message displays to customers of your website if they follow a broken or dead link . If your website runs on an Apache web server, here’s how to create a custom, user-friendly page that will help your customers find the page they were looking for:

1. Create your custom page not found page

Create a basic html file called notfound.html. It should look something like this:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

The title and level one heading of your page should clearly state the reason why the customer has ended up on that page:

<!DOCTYPE html>
<html>
    <head>
        <title>404 error: page cannot be found</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>404 error: page cannot be found</h1>    </body>
</html>

It’s also a good idea to explain what happened and why:

<!DOCTYPE html>
<html>
    <head>
        <title>404 error: page cannot be found</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>404 error: page cannot be found</h1>
<h2>What happened?</h2><p>The page you requested cannot be found.</p><h2>Why did this happen?</h2><p>You may have accidentally typed in an incorrect URL (address) or the page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>    </body>
</html>

2. Upload the notfound.html to the main directory of your website

You can use an FTP program such as FileZilla to do this.

3. Create a file called .htaccess

Add the line ErrorDocument 404 /notfound.html to this file and save it as ‘.htaccess’; not ‘.htaccess.txt’ or ‘blahblah.htaccess’. .htaccess is the file extension. It should look like this:

ErrorDocument 401 /notauthorised.html

4. Upload the .htaccess file to main directory of your website

Again, you can use an FTP program such as FileZilla to do this.