There are many string methods available to work with Strings.
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>
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>
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>
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>
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 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>
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>
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>
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>
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>
If second parameter is negative, substr() returns text from end of string
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>
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>
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>
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>