Javascript String Methods with example

<html> 
<head>
<title>Javascript string methods</title>
</head>
<body> <p>Below paragraph returns the length of the given string</p> <p id="demo"></p>
<script>
let text = "Helloworld"; document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph extracts a part of the string and returns the extracted string</p>
<p id="demo1"></p>
<script> let text = "Helloworld"; document.getElementById("demo1").innerHTML = text.slice(0,5); </script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph extracts a part of the string and returns the extracted string</p>
<p id="demo2"></p>
<script>
let text = "Helloworld";
document.getElementById("demo2").innerHTML = text.substring(0,5); </script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph extracts a part of the string and returns the extracted string</p>
<p id="demo3"></p>
<script>
let text = "Helloworld";
document.getElementById("demo3").innerHTML = text.substr(0,5); </script>
</body>
</html>
  • The first parameter defines the text to be replaced
  • The second parameter defines the replaced text
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph replaces a part of the string with a new string</p>
<p id="demo4"></p>
<script>
let text = "Helloworld";
document.getElementById("demo4").innerHTML = text.replace("world","India");
</script>
</body>
</html>
  • The first parameter defines all the matching text to be replaced.
  • The second parameter defines the replaced text.
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph replaces all the matching parts of the string with a new string</p>
<p id="demo5"></p>
<script>
let string = "If you want to visit Inida then you should visit the capital of India";
document.getElementById("demo5").innerHTML = string.replace(/you/g,"I");
</script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph makes the given string in uppercase.</p>
<p id="demo6"></p>
<script>
let string = "If you want to visit Inida then you should visit the capital of India";
document.getElementById("demo6").innerHTML = string.toUpperCase(); </script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph makes the given string in lowercase.</p> <p id="demo7"></p>
<script>
let string = "If you want to visit Inida then you should visit the capital of India";
document.getElementById("demo7").innerHTML = string.toLowerCase(); </script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph removes whitespaces from the both side of a string</p>
<p id="demo9"></p>
<script>
let trimstring = "Helloworld"; document.getElementById("demo9").innerHTML = trimstring.trim(); </script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph will diplay the searched character from a string</p>
<p id="demo10"></p>
<script> let text = "Helloworld"; document.getElementById("demo10").innerHTML = text.charAt(5); </script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph will diplay the unicode character from a string</p>
<p id="demo11"></p>
<script> let text = "Helloworld"; document.getElementById("demo11").innerHTML = text.charCodeAt(5); </script>
</body>
</html>
  • The first parameter defines the number of times the new string is to be added
  • The second parameter defines the new string.
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph will pads a string at the start with another string</p>
<p id="demo12"></p>
<script>
let padstring = 3;
let padnumberstring = padstring.toString(); document.getElementById("demo12").innerHTML = padnumberstring.padStart(5,'y');
</script>
</body>
</html>
  • The first parameter defines the number of times the new string is to be added.
  • The second parameter defines the new string.
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph will pads a string at the end with another string</p>
<p id="demo13"></p>
<script>
let padstring = 3;
let padnumberstring = padstring.toString(); document.getElementById("demo13").innerHTML = padnumberstring.padEnd(5,'y');
</script>
</body>
</html>
<html> 
<head>
<title>Javascript string methods</title>
</head>
<body>
<p>Below paragraph will join two strings together</p>
<p id="demo14"></p>
<script>
let text1 = "Hello";
let text2 = "World";
document.getElementById("demo14").innerHTML = text1.concat(" ",text2);
</script>
</body>
</html>

--

--

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

25 Followers

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.