JS String Methods

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