JavaScript String Methods

JavaScript Methods or function is a set of statements that is use to perform a dynamic(run-time) effect on the web page. A function in JavaScript perform when an event is triggered. A function may or may not accept arguments.

A String is a collection of characters, String is a combination of Small letters(a-z), Capital letters(A-Z), Digits(0-9), Special Characters (&, #, @) etc. A String can be any text inside quotes. In JavaScript, we can use 'single' or "double" quotes to define a string.

String Methods perform the desired action on the characters. Common String Methods are:

Methods	Description
length	length is a JavaScript property, use to return the length of strings.
charAt()	Returns the first character at the specified index (position)
concat()	Joins two or more strings, and returns a copy of the joined strings
indexOf()	Returns the position of the first found occurrence of a specified value in a string
match()	Searches a string for a match against a regular expression, and returns the matches
replace()	Searches a string for a value and returns a new string with the value replaced
search()	Searches a string for a value and returns the position of the match
slice()	Extracts a part of a string and returns the extracted part in a new string.
substr()	Extracts a part of a string from a start position through a number of characters
substring()	Extracts a part of a string between two specified positions
toLowerCase()	Converts a string to lowercase letters
toUpperCase()	Converts a string to uppercase letters
trim()	Removes whitespace from both ends of a string

JavaScript - Example

Example 1: String length property.

<script>
    function fun()
    {
        var a = document.getElementById("text1").value;	
        var len = a.length;
        document.getElementById("output").innerHTML = "Length = " + len;
    }
</script>
<body>
    <p>Enter String: <input type="text" id="text1"></p>
    <input type="button" value="Find Length" onclick="fun()"></td>
    <p id="output"></p>
</body>

Example 2: charAt function.

<script>
    function fun()
    {
        var a = document.getElementById("t1").value;
        var b = parseInt(document.getElementById("t2").value);
        if(Number.isInteger(b))
        {
            var c = a.charAt(b);
            output.innerHTML = "Character at " + b + " position is: "+c;
        }
        else
        {
            output.innerHTML = "Error: Enter number in position";
        }
    }
</script>

Example 3: String concat function.

	
<body>
    <form>
        <p>Enter 1st String <input type="text" id="text1">
        <p>Enter 2nd String <input type="text" id="text2">
        <button type="button" onclick="concatString()" >Concat String</button>
        <p id="output"></p>
    </form>
</body>
<script>
    function concatString()
    {
        var a = text1.value;
        var b = text2.value;
        output.innerHTML = a+" "+b;
    }
</script>

Example 4: String indexOf function.

	
<body>
    &tl;form>
        &tl;p>Enter String <input type="text" id="text1">
        &tl;p>Enter index <input type="text" id="text2">
        &tl;button type="button" onclick="findIndex()" >IndexOf</button>
        &tl;p id="output"></p>
    &tl;/form>
&tl;/body>
&tl;script>
function findIndex()
{
    var a = text1.value;
    var b = text2.value;  //search
    var c = a.indexOf(b); //position (index)
    if(c>=0)
        output.innerHTML = "String Found at " + c + " position";
    else
        output.innerHTML = "Not Found";
}
</script>

var str = "Javascript is easy and Javascript is interesting";
var pos = str.indexOf("javascript");

var str = "Javascript is easy and Javascript is interesting";
var pos = str.lastIndexOf("javascript");

String Replace
str = "I like Programming";
var n = str.replace("Programming","Scripting");

String Search
var str = "Javascript is easy and Javascript is interesting";
var pos = str.search("javascript");

String Slice
var str = "Apple, Orange, Mango";
var res = str.slice(7,13);
var res = str.slice(7);

String Substring
var str = "Apple, Orange, Mango";
var res = str.substring(7,13);

String Lower Case
var text1 = "Hello World!"; // String
var text2 = text1.toLowerCase(); // text2 is text1 converted to upper

String Upper Case
var text1 = "Hello World!"; // String
var text2 = text1.toUpperCase(); // text2 is text1 converted to upper

Exercise - JavaScript String Methods

Exercise 1: Validate length using string length property

Example 2: charAt function, Check input name is boy or girl.