JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript String Methods
String methods allows to work with strings.
String Methods and Properties
Primitive values, like “John Doe”, does not consist properties or methods (because they are not objects).
But with JavaScript, methods and properties are also available to primitive values, as JavaScript uses primitive values as objects while executing methods and properties.
JavaScript String Length
The length property is used to returns the length of a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a string:</p>
<p id=”demo”></p>
<script>
let text = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
document.getElementById(“demo”).innerHTML = text.length;
</script>
</body>
</html>
Output
JavaScript String Properties
The length property returns the length of a string:
26
Extracting String Parts
There are 3 methods for extracting a part of a string:
- slice(start, end).
- substring(start, end).
- substr(start, length).
slice() is used to extract a part of a string and returns the extracted part in a new string.
The method uses 2 parameters: the start position, and the end position (end not included).
Example
Taking a portion of a string from position 7 to position 13 (13 not included).
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.slice(7,13);
</script>
</body>
</html>
Output
JavaScript String Methods
The slice() method extract a part of a string and returns the extracted parts in a new string:
Banana
If a parameter is negative, the position is counted from the end of the string.
This below example slices out a part of a string from position -12 to position -6.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.slice(-12,-6);
</script>
</body>
</html>
Output
JavaScript String Methods
The slice() method extract a part of a string and returns the extracted parts in a new string:
Banana
If the second parameter is omitted, the method slices out the rest of the string.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.slice(7);
</script>
</body>
</html>
Output
JavaScript String Methods
The slice() method extract a part of a string and returns the extracted parts in a new string:
Banana,Kiwi
or, counting from the end.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.slice(-12);
</script>
</body>
</html>
Output
JavaScript String Methods
The slice() method extract a part of a string and returns the extracted parts in a new string:
Banana,Kiwi
JavaScript String substring()
substring() is similar to slice().
The difference is that start and end values less than 0 are treated as 0 in substring().
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.substring(7,13);
</script>
</body>
</html>
Output
JavaScript String Methods
The substring() method extract a part of a string and returns the extracted parts in a new string:
Banana
JavaScript String substr()
substr() is similar to slice().
The difference is that the second parameter specifies the length of the extracted part.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.substr(7,6);
</script>
</body>
</html>
Output
JavaScript String Methods
The substr() method extract a part of a string and returns the extracted parts in a new string:
Banana
If you omit the second parameter, substr() will slice out the rest of the string.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id=”demo”></p>
<script>
let str = “Apple, Banana, Kiwi”;
document.getElementById(“demo”).innerHTML = str.substr(7);
</script>
</body>
</html>
Output
JavaScript String Methods
The substr() method extract a part of a string and returns the extracted parts in a new string:
Banana,Kiwi
Replacing String Content
The replace() method replaces a specifies value with another value in a string:
Example
<!DOCTYPE html>
<html
<body>
<h2>JavaScript String Methods</h2>
<p>Replace “Microsoft” with “Webhostguru” in the paragraph below:</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”>Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById(“demo”).innerHTML;
document.getElementById(“demo”).innerHTML =
text.replace(“Microsoft”,”Webhostguru”);
}
</script>
</body>
</html>
Output
JavaScript String Methods
Replace "Microsoft" with "Webhostguru" in the paragraph below:
Please visit Microsoft!
By default, the replace() method replaces only the first match.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace “Microsoft” with “W3Schools” in the paragraph below:</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”>Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById(“demo”).innerHTML;
document.getElementById(“demo”).innerHTML =
text.replace(“Microsoft”,”W3Schools”);
}
</script>
</body>
</html>
Output
JavaScript String Methods
Replace "Microsoft" with "Webhostguru" in the paragraph below:
Please visit Microsoft and Microsoft!
By default, the replace() method is case sensitive. Writing MICROSOFT (with upper-case) will not work.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Try to replace “Microsoft” with “Webhostguru” in the paragraph below:</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”>Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById(“demo”).innerHTML;
document.getElementById(“demo”).innerHTML =
text.replace(“MICROSOFT”,”Webhostguru”);
}
</script>
<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>
</body>
</html>
Output
JavaScript String Methods
Try to replace "Microsoft" with "Webhostguru" in the paragraph below:
Please visit Microsoft!
The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.
To replace case insensitive, using a regular expression with an /i flag (insensitive):
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace “Microsoft” with “Webhostguru” in the paragraph below:</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”>Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById(“demo”).innerHTML;
document.getElementById(“demo”).innerHTML =
text.replace(/MICROSOFT/i,”Webhostguru”);
}
</script>
</body>
</html>
Output
JavaScript String Methods
Replace "Microsoft" with "Webhostguru" in the paragraph below:
Please visit Microsoft!
Converting to Upper and Lower Case
A string is converted to upper case with toUpperCase():
A string is converted to lower case with toLowerCase():
JavaScript String toUpperCase()
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Convert string to upper case:</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”>Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById(“demo”).innerHTML;
document.getElementById(“demo”).innerHTML =
text.toUpperCase();
}
</script>
</body>
</html>
Output
JavaScript String Methods
Convert string to upper case:
Hello World!
JavaScript String toLowerCase()
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Convert string to lower case:</p>
<button onclick=”myFunction()”>Try it</button>
<p id=”demo”>Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById(“demo”).innerHTML;
document.getElementById(“demo”).innerHTML =
text.toLowerCase();
}
</script>
</body>
</html>
Output
JavaScript String Methods
Convert string to lower case:
HELLO!
JavaScript String concat()
concat() joins two or more strings.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The concat() method joins two or more strings:</p>
<p id=”demo”></p>
<script>
let text1 = “Hello”;
let text2 = “World!”;
let text3 = text1.concat(” “,text2);
document.getElementById(“demo”).innerHTML = text3;
</script>
</body>
</html>
Output
JavaScript String Methods
The concat() method joins two or more strings:
Hello World!
The concat() method is used inplace of the plus operator. These two lines do the same:
Example
text = “Hello” + ” ” + “World!”;
text = “Hello”.concat(” “, “World!”);
JavaScript String trim()
The trim() method removes whitespace from both sides of a string:
Example
<!DOCTYPE html>
<html>
<h2>The trim() Method</h2>
<p id=”demo”></p>
<script>
let text1 = ” Hello World! “;
let text2 = text1.trim();
document.getElementById(“demo”).innerHTML =
“Length text1=” + text1.length + “<br>Length2 text2=” + text2.length;
</script>
</body>
</html>
Output
The trim() Method
Length text1=22
Length2 text2=12
JavaScript String Padding
ECMAScript 2017 is used to add two String methods: padStart() and padEnd() to support padding at the beginning and at the end of a string.
JavaScript String padStart()
The padStart() method pads a string with another string.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The padStart() method pads a string with another string:</p>
<p id=”demo”></p>
<script>
let text = “5”;
document.getElementById(“demo”).innerHTML = text.padStart(4,”x”);
</script>
</body>
</html>
Output
JavaScript String Methods
The padStart() method pads a string with another string:
xxx5
JavaScript String padEnd()
The padEnd() method pads a string with another string.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The padStart() method pads a string with another string:</p>
<p id=”demo”></p>
<script>
let text = “5”;
document.getElementById(“demo”).innerHTML = text.padEnd(4,”x”);
</script>
</body>
</html>
Output
JavaScript String Methods
The padStart() method pads a string with another string:
5xxx
Extracting String Characters
There are 3 methods for extracting string characters
- charAt(position)
- charCodeAt(position)
- Property access [ ]
JavaScript String charAt()
The charAt() method is used to return the character at a specified index (position) in a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The charAt() method returns the character at a given position in a string:</p
<p id=”demo”></p>
<script>
var text = “HELLO WORLD”;
document.getElementById(“demo”).innerHTML = text.charAt(0);
</script>
</body>
</html>
Output
JavaScript String Methods
The charAt() method returns the character at a given position in a string:
H
JavaScript String charCodeAt()
The charCodeAt() method is used to return the unicode of the character at a specified index in a string:
The method returns a UTF-16 code (an integer between 0 and 65535).
Property Access
ECMAScript 5 (2009) enable property access [ ] on strings:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>ECMAScript 5 allows property access on strings:</p>
<p id=”demo”></p>
<script>
var str = “HELLO WORLD”;
document.getElementById(“demo”).innerHTML = str[0];
</script>
</body>
</html>
Output
JavaScript String Methods
ECMAScript 5 allows property access on strings:
H
JavaScript String split()
A string can be converted to an array with the split() method:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Display the first array element, after a string split:</p>
<p id=”demo”></p>
<script>
let text = “a,b,c,d,e,f”;
const myArray = text.split(“,”);
document.getElementById(“demo”).innerHTML = myArray[0];
</script>
</body>
</html>
Output
JavaScript String Methods
Display the first array element, after a string split:
a
If the separator is omitted, the returned array consists of the whole string in index [0].
If the separator is “”, the returned array is an array of single characters:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Using String.split():</p>
<p id=”demo”></p>
<script>
let text = “Hello”;
const myArr = text.split(“”);
text = “”;
for (let i = 0; i < myArr.length; i++) {
text += myArr[i] + “<br>”
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript String Methods
Using String.split():
H
e
l
l
o