JavaScript - Check if value is a percentage?

To check the value for percentage, use a regular expression. When dealing with user input or processing data in JavaScript, it's important to make sure a value is a valid percentage. This article shows you how to check if a value is a percentage using JavaScript, highlighting a useful method that involves regular expressions.

Let's say the following is our value:

var value = "97%";

To check the value for percentage, we are using a regular expression that matches numbers followed by the % symbol.

Using Regular Expression

The best way to check if a string is in the correct percentage format is by using regular expressions. A regular expression sets the specific pattern that is used to check a valid percentage value.

Regular Expression Pattern

The pattern /^\d+(\.\d+)?%$/ breaks down as follows:

• ^ - Start of string
• \d+ - One or more digits
• (\.\d+)? - Optional decimal part (dot followed by digits)
• % - Literal percent symbol
• $ - End of string

Example

The following example demonstrates checking various values for percentage format:

// Test valid percentage
var value = "97%";
var result = /^\d+(\.\d+)?%$/.test(value);
if (result == true) {
    console.log("The percent is = " + value);  
} else {
    console.log("This is not percentage");  
}

// Test invalid percentage
var value1 = "percent";
var result1 = /^\d+(\.\d+)?%$/.test(value1);
if (result1 == true) {
    console.log("The percent is = " + value1);  
} else {
    console.log("This is not percentage");  
}

// Test decimal percentage
var value2 = "45.5%";
var result2 = /^\d+(\.\d+)?%$/.test(value2);
if (result2 == true) {
    console.log("The percent is = " + value2);  
} else {
    console.log("This is not percentage");  
}

// Test invalid format
var value3 = "100";
var result3 = /^\d+(\.\d+)?%$/.test(value3);
if (result3 == true) {
    console.log("The percent is = " + value3);  
} else {
    console.log("This is not percentage");  
}

Output

The percent is = 97%
This is not percentage
The percent is = 45.5%
This is not percentage

Function Implementation

You can also create a reusable function for percentage validation:

function isPercentage(value) {
    return /^\d+(\.\d+)?%$/.test(value);
}

// Test the function
console.log("97% is percentage:", isPercentage("97%"));
console.log("45.5% is percentage:", isPercentage("45.5%"));
console.log("abc% is percentage:", isPercentage("abc%"));
console.log("100 is percentage:", isPercentage("100"));

Output

97% is percentage: true
45.5% is percentage: true
abc% is percentage: false
100 is percentage: false

Conclusion

Using regular expressions provides an efficient way to validate percentage format in JavaScript. The pattern /^\d+(\.\d+)?%$/ ensures the string contains only numbers (with optional decimals) followed by the % symbol.