JavaScript String Methods

There are many string methods available to work with Strings.

String Length

String length property used to count total characters in a string.

<!DOCTYPE html>
<html>
<body>

<p>The quick brown fox jumps over the lazy dog is <span id="demo"></span> characters long</p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var strlen = str.length;
document.getElementById('demo').innerHTML=strlen;
</script>

</body>
</html>

Download the code Run the code

Find String within String

The indexOf() used to find position of the first instance of the given string

<!DOCTYPE html>
<html>
<body>

<p>brown word start from position <span id="demo"></span></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var position = str.indexOf('brown');
document.getElementById('demo').innerHTML=position;
</script>

</body>
</html>

Download the code Run the code

The lastIndexOf() method is used to find position of the last instance of the given string

<!DOCTYPE html>
<html>
<body>

<p>last brown word start from position <span id="demo"></span></p>

<script>
var str = "The quick brown fox jumps over the lazy dog from brown street";
var position = str.lastIndexOf('brown');
document.getElementById('demo').innerHTML=position;
</script>

</body>
</html>

Download the code Run the code

indexOf() and lastIndexOf() methods returns -1 if the text is not found within string

The search() methods search for a specified text within string and it will return position.

<!DOCTYPE html>
<html>
<body>

<p>brown word start from position <span id="demo"></span></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var position = str.search('brown');
document.getElementById('demo').innerHTML=position;
</script>

</body>
</html>

Download the code Run the code

The result of indexOf() and search() methods are identical but search() method is much more powerful. search() method can take regular expressions as search text.

The slice() Method

The slice() method returns part of string as a new string. slice() method takes two parameters, start position and end position for slice text.

<!DOCTYPE html>
<html>
<body>

<p>string from character 9 to 15 is <span id="demo"></span></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var sliced = str.slice(9, 15);
document.getElementById('demo').innerHTML=sliced;
</script>

</body>
</html>

Download the code Run the code

slice() method can take negative parameters. If parameters is negative it starts count from end of string

<!DOCTYPE html>
<html>
<body>

<p>slice() method extracts part of string from last when negative values are given </p>
<p id="demo"></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var sliced = str.slice(-8, -4);

document.getElementById('demo').innerHTML=sliced;
</script>

</body>
</html>

Download the code Run the code

If second parameter is not given, it will take slice until last character of string.

<!DOCTYPE html>
<html>
<body>

<p>string from character 9 is</p>
<p id="demo"></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var sliced = str.slice(9);

document.getElementById('demo').innerHTML=sliced;
</script>

</body>
</html>

Download the code Run the code

substring() Method

The substring() method is identical to slice() method except that negative values not work with substring() method.

<!DOCTYPE html>
<html>
<body>

<p>substring() returns part of string</p>
<p id="demo"></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var substr = str.substring(10, 20);

document.getElementById('demo').innerHTML=substr;
</script>

</body>
</html>

Download the code Run the code

substr() Method

The substr() method is identical to slice() method except that second parameter specifies length of string to return.

<!DOCTYPE html>
<html>
<body>

<p>substr() also returns part of string</p>
<p id="demo"></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var substr = str.substr(10, 5);

document.getElementById('demo').innerHTML=substr;
</script>

</body>
</html>

Download the code Run the code

If second parameter is negative, substr() returns text from end of string

replace() Method

The replace() method is used to search and replace part of string.

<!DOCTYPE html>
<html>
<body>

<p>replace() method search and replace part of string</p>
<p id="demo"></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var substr = str.replace("brown", "black");

document.getElementById('demo').innerHTML=substr;
</script>

</body>
</html>

Download the code Run the code

replace() method can also takes regular expression to search strings.

By default, replace() method replace first occurrence of string. You can replace all occurrence of string using regular expression and /g identifier(global match)

<!DOCTYPE html>
<html>
<body>

<p>replace() method with regular expression replace all occurrences.</p>
<p id="demo"></p>

<script>
var str = "The quick brown fox jumps over the lazy brown dog";
var substr = str.replace(/brown/g, "black");

document.getElementById('demo').innerHTML=substr;
</script>

</body>
</html>

Download the code Run the code

Convert string case

The toUpperCase() method is used to convert string to upper case

<!DOCTYPE html>
<html>
<body>

<p>toUpperCase() method convert string to upper case : <span id="demo"></span></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var uprstr = str.toUpperCase();
document.getElementById('demo').innerHTML=uprstr;
</script>

</body>
</html>

Download the code Run the code

The toLowerCase() method is used to convert string to lower case

<!DOCTYPE html>
<html>
<body>

<p>toLowerCase() method convert string to lower case : <span id="demo"></span></p>

<script>
var str = "The quick brown fox jumps over the lazy dog";
var lowerrstr  = str.toLowerCase();
document.getElementById('demo').innerHTML=lowerrstr;
</script>

</body>
</html>

Download the code Run the code

<<< JavaScript StringsJavaScript Numbers >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .