- JavaScript Tutorial
- JavaScript Advantages and Disadvantages
- Adding JavaScript to html
- External JavaScript JS File – Advantages, Disadvantages, Syntax, Attributes
- JavaScript Syntax
- JavaScript Statements
- JavaScript Output
- JavaScript Comments
- Javascript Data Types
- JavaScript Variables
- JavaScript Scope of Variables
- JavaScript Operators
- Javascript ternary operator
- Javascript typeof Operator
- Javascript Arithmetic Operators
- Javascript Assignment
- JavaScript Functions
- JavaScript Anonymous Functions
- JavaScript Callback Functions
- JavaScript Objects
- JavaScript Events
- JavaScript Strings
- JavaScript String Methods
- JavaScript Numbers
- JavaScript Number Methods
- JavaScript Math Object
- JavaScript Date
- JavaScript Date Formats
- JavaScript Date Methods
- JavaScript Arrays
- JavaScript Array Methods
- JavaScript Boolean
- JavaScript Comparisons
- JavaScript Conditions
- JavaScript Switch statement
- JavaScript For loop
- JavaScript while loop
- JavaScript Break and Continue
- JavaScript Type Conversion
- JavaScript Regular Expressions
- JavaScript Errors
- JavaScript Debugging
- JavaScript Conventions
- JavaScript Best Practices
- JavaScript Common Mistakes
- JavaScript Reserved Words
- JavaScript Performance
- JSON Data, format, mime type and parsing
- JavaScript Form Validation
- Forms API
- JavaScript Objects Definition
- JavaScript Object Properties
- JavaScript Object Methods
- JavaScript Object Prototypes
- JavaScript Window Object
- JavaScript Window Screen
- JavaScript Cookies
- JavaScript Location Object
- JavaScript History
- JavaScript Window Navigator
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