STRING FUNCTIONS

------------------

1. length
2. slice()
3. substring()
4. substr()
5. replace()
6. replaceAll()
7. toUpperCase()
8. toLowerCase()
9. concat()
10. trim()
11. trimStart()
12. trimEnd()
13. padStart()
14. padEnd()
15. charAt()
16. charCodeAt()
17. split()

1. length
-----------

<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerText = text.length;
</script>

2. slice()
-----------

<h2>The slice() Method</h2>

<p>The sliced (extracted) part of the string is:</p>

<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part;

let text = "Apple, Banana, Kiwi";

let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>

3. substring()
---------------

<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>

4. substr()
------------

<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.substr(-4);
</script>

5. replace()
--------------

Type - 1 :
------------

<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","Google");
}
</script>

Type - 2 :
-----------

<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","W3Schools");
}
</script>

<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be
replaced.</p>

Type - 3 :
------------

<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,"W3Schools");
}
</script>

Type - 4 :
------------

<p>Replace all occurrences of "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/g,"W3Schools");
}
</script>

6. ReplaceAll()
------------------

<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

7. toUpperCase()
------------------

<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>
-----------------------------------------------------------------------------------

String Search Methods

-----------------------

1. indexOf()
2. lastIndexOf()
3. search()
4. match()
5. matchAll()
6. includes()
7. startsWith()
8. endsWith()

1. indexOf()
-------------

<h2>The indexOf() Method</h2>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>

2. lastIndexOf()
------------------
<h2>The lastIndexOf() Method</h2>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;

let text = "Please locate where 'locate' occurs!";

let index = text.lastIndexOf("John");
document.getElementById("demo").innerHTML = index;

let text = "Please locate where 'locate' occurs!";

let index = text.indexOf("locate", 15);
document.getElementById("demo").innerHTML = index;

let text = "Please locate where 'locate' occurs!";

text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index;

</script>

3. search()
------------

<h2>The search() Method</h2>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index;
</script>

4. match()
------------

<h2>The match() Method</h2>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
 let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

//Perform a global search for "ain":

let text = "The rain in SPAIN stays mainly in the plain";

text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

//Perform a global, case-insensitive search for "ain":

let text = "The rain in SPAIN stays mainly in the plain";

text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

5. matchAll()
---------------

<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");
document.getElementById("demo").innerHTML = Array.from(iterator);

let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);
document.getElementById("demo").innerHTML = Array.from(iterator);

let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

6. includes()
--------------

<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");

let text = "Hello world, welcome to the universe.";

document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>

Notes :
--------

includes() is case sensitive.

includes() is an ES6 feature.

includes() is not supported in Internet Explorer.

7. startsWith()
----------------

<h2>The startsWith() Method</h2>

<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");

let text = "Hello world, welcome to the universe.";

document.getElementById("demo").innerHTML = text.startsWith("world");

let text = "Hello world, welcome to the universe.";

document.getElementById("demo").innerHTML = text.startsWith("world", 5);

let text = "Hello world, welcome to the universe.";

document.getElementById("demo").innerHTML = text.startsWith("world", 6);

</script>

Notes
------
startsWith() is case sensitive.
startsWith() is an ES6 feature.

startsWith() is not supported in Internet Explorer.

8. endsWith()
---------------

<h2>The endsWith() Method</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");

let text = "Hello world, welcome to the universe.";

document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>

Notes
------
endsWith() is case sensitive.

endsWith() is an ES6 feature.

endsWith() is not supported in Internet Explorer.