How to check whether a value is numeric or not with jQuery

Syntax

jQuery.isNumeric( value )

Definition and Usage

The jQuery $.isNumeric() method. It verifies if its argument shows a numeric value. If varified to be true, it returns true. Else it returns false.

As of jQuery 3.0 $.isNumeric() returns true only if the argument is of type number, or if it’s of type string and it can be coerced into finite numbers. In all other cases, it returns false.

Example

Sample return values of $.isNumeric with various inputs.

<script type="text/javascript">

    // Return true (numeric)

    $.isNumeric("-10")

    $.isNumeric("0")

    $.isNumeric(0xFF) /* Hexadecimal notation (0xFF represents the number 255) */

    $.isNumeric("0xFF")

    $.isNumeric(+10)

    $.isNumeric(1.25e2) /* Exponential notation (1.25e2 represents the number 125) */

    $.isNumeric("1.25e2")

    $.isNumeric("13.417")

    $.isNumeric(0144)

    $.isNumeric(-0x56)

     

    // Return false (non-numeric)

    $.isNumeric("-0x52")

    $.isNumeric("7.2xyz")

    $.isNumeric("")

    $.isNumeric({})

    $.isNumeric(NaN)

    $.isNumeric(null)

    $.isNumeric(true)

    $.isNumeric(Infinity)

    $.isNumeric(undefined)

</script>

Conclusion

The jQuery numeric code enables the user to determine whether a number is numeric or not. Since it is difficult to determine so in large quantities, the code enables the user to simplify the task at hand delivering better results and efficiency.

View Demo

How to replace all occurrences of a string using JavaScript

You can use the JavaScript replace() in combination with the regular expression to find and replace all occurrences of a word or substring inside any string, like this:

Example

<script type="text/javascript">

    var myStr = 'freedom is not worth having if it does not include the freedom to make mistakes.';

    var newStr = myStr.replace(/freedom/g, "liberty");

    

    // Printing the modified string

    document.write(newStr);

</script>

View Demo

How to get number of elements in a div in jQuery

You can use the jQuery .length property to find the number of elements in a DIV element or any other element. The following example will alert the number of paragraphs in a <div> element having the class .content on document ready event.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery Get Number of Paragraphs in a Div</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        var matched = $(".content p");

        alert("Number of paragraphs in content div = " + matched.length);

    });

</script>  

</head> 

<body>

    <div class="content">

        <h1>This is a heading</h1>

        <p>This is a paragraph.</p>

        <p>This is another paragraph.</p>

        <div>This is just a block of text.</div>

        <p>This is one more paragraph.</p>

    </div>

</body>

</html>

View Demo

How to display all items in an array using loop with jQuery

The jQuery.each() or $.each() can be used to seamlessly iterate over any collection, whether it is an object or an array. However, since the $.each() function internally retrieves and uses the length property of the passed array or object.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery Print Array Values with Loop</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        var fruitsArray = ["a", "b", "c", "d", "e"];

        $.each(fruitsArray, function(index, value){

            $("#result").append(index + ": " + value + '<br>');

        });

    });

</script>  

</head> 

<body>

    <div id="result"></div>

</body>

</html>

View Demo

How to assign block of HTML code to a JavaScript variable in JavaScript

The simple and safest way to use the concatenation operator (+) to assign or store a bock of HTML code in a JavaScript variable. You should use the single-quotes while stingify the HTML code block, it would make easier to preserve the double-quotes in the actual HTML code.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Store HTML Code in JavaScript Variable</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

    var codeBlock = '<div class="content">' +

                        '<h1>This is a heading</h1>' +

                        '<p>This is a paragraph of text.</p>' +

                        '<p><strong>Note:</strong> If you don\'t escape "quotes" properly, it will not work.</p>' +

                    '</div>';

    $(document).ready(function(){

        // Inserting HTML code inside wrapper element

        $(".wrapper").html(codeBlock);

    });

</script>  

</head> 

<body>

    <div class="wrapper"></div>

</body>

</html>

View Demo

How to explode or split a string in JavaScript

If you want to explode or split a string from a certain character or separator you can use the JavaScript split() method. The following example will show you how to split a string from whitespace. The returned value will be an array, containing the splitted values.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>JavaScript Split a String from Space</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

    function splitArray(){

        var myStr = "PHP HTML CSS";

        var strArray = myStr.split(" ");

        

        // Display array values on page

        for(var i = 0; i < strArray.length; i++){

            $("body").append("<p>" + strArray[i] + "</p>");

        }

    }

</script>

</head> 

<body>

    <p>Click the following button to split myStr string and show returned array values using for loop</p>

    <button type="button" onclick="splitArray();">Show Splitted Values</button>

</body>

</html>

View Demo

How to replace character inside a string using JavaScript

You can use the JavaScript replace() method to replace the occurrence of any character in a string. However, the replace() will only replace the first occurrence of the specified character. To replace all the occurrence you can use the global (g) modifier. The following example will show you how to replace all underscore (_) character in a string with hyphen (-).

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Example of String Replace in JavaScript</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script type="text/javascript">

    function strReplace(){

        var myStr = 'PHP_HTML_jQuery';

        var newStr = myStr.replace(/_/g, "-");

        

        // Insert modified string in paragraph

        $(".p").html(newStr);

    }

</script>

</head>

<body>

    <p class="p">PHP_HTML_jQuery</p>

    <button type="button" onclick="strReplace();">Replace</button>

</body>

</html>

 

View Demo

How to loop through an array using JavaScript

The easiest way to loop through or iterate over an array in JavaScript is using the for loop. The following example will show you how to display an array values one by one in browser.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>JavaScript for Loop Over an Array</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

    function arrayLoop(){

        var myArray = ["a", "b", "c", "d"];

        

        // Display array values on page

        for(var i = 0; i < myArray.length; i++){

            $("body").append("<p>" + myArray[i] + "</p>");

        }

    }

</script>

</head> 

<body>

    <button type="button" onclick="arrayLoop();">Show Arrya Values</button>

</body>

</html>

View Demo

How to select an element with multiple classes in jQuery

If you want to target the elements with multiple classes names, such as selecting the elements only if it has both classX and classY, or has classes classX, classY,…,classZ or something like that, just put the class selectors together without any space in between, like this:

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Selecting Elements with Multiple Classes</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        // Apply background color to the elements if it has both classA and classB

        $(".classX.classZ").css("background-color", "#E9967A");

    });

</script>

</head>

<body>

    <p class="classX">Element with classX (won't match)</p>

    <p class="classX classZ">Element with classX and classZ (match)</p>

    <p class="classY">Element with classY (won't match)</p>

    <p class="classZ classX">Element with classY and classZ (match)</p>

    <p class="classD">Element with classD (won't match)</p>

    <p class="classX classZ classY">Element with classX, classY and classZ (match)</p>

</body> 

</html>

View Demo

How to refresh a page using jQuery

You can simply use the JavaScript location.reload() method to refresh or reloads the page. This method optionally accepts a Boolean parameter true or false. If the parameter true is specified, it causes the page to always be reloaded from the server. However, if it is false (which is default) or not specified, the browser may reload the page from its cache.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Reload the Page Using jQuery</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $("button").click(function(){

            location.reload(true);

        });

    });

</script>

</head>

<body>

    <button type="button">Reload page</button>   

</body> 

</html>

You can also do the same thing with plain JavaScript. You don’t need jQuery for this. Check out the following example which is the modified version of the previous example.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Refresh the Page with JavaScript</title>

<script type="text/javascript">

    function reloadPage(){

        location.reload(true);

    }

</script>

</head>

<body>

    <button type="button" onclick="reloadPage();">Reload page</button>   

</body> 

</html>

View Demo