String Methods

EasyProgramming.net tutorial on String methods in JavaScript

by DannyEnglander

HTML

<!-- Easy JavaScript #11 - string methods -->

<p>
Welcome to the 11th Easy JavaScript tutorial! Let's go over the string object. 
</p>
<p>
Everything in JavaScript is an object (or is treated like an object). And like every object, it has properties and methods. 
</p>
<h3>
My String: <span id="myString"></span>
</h3>
<div class="display">
length of my string is <span id="length"></span>
</div>
<div class="display">
indexOf() "Easy" is <span id="indexOf"></span>
</div>
<div class="display">
search() "Easy" is <span id="search"></span>
</div>
<div class="display">
slice() 11 to 15 <span id="slice"></span>
</div>
<div class="display">
substring() from position 11 <span id="substring"></span>
</div>
<div class="display">
substr() 11 to length of 16 <span id="substr"></span>
</div>
<div class="display">
replace() "Programming" with "JavaScript" <span id="replace"></span>
</div>
<div class="display">
toUpperCase() - yell at me <span id="toUpperCase"></span>
</div>
<div class="display">
toLowerCase() - don't yell please <span id="toLowerCase"></span>
</div>
<div class="display">
concat() str and str2 <span id="concat"></span>
</div>
<div class="display">
charAt() Position 12 <span id="charAt"></span>
</div>

<h3 id="buffer">
Helpful Info
</h3>
<h4>
Properties:
</h4>
<ul>
<li><strong>length</strong> - get the length</li>
</ul>
<h4>
Methods:
</h4>
<ul>
<li><strong>indexOf()</strong> - first occurance of a specified text</li>
<li><strong>search()</strong> - search for text and returns position</li>
<li><strong>slice()</strong> - extract part of a string - takes beginning and end positions</li>
<li><strong>substring()</strong> - like slice, extract part of a string, only start position is required</li>
<li><strong>substr()</strong> - extract part of a string, first parameter is the start position, and second is the length</li>
<li><strong>replace()</strong> - replace text in a string</li>
<li><strong>toUpperCase()</strong> - convert to upper...

CSS

#buffer{
  padding-top: 50px;
}
.display{
  line-height: 20px;
}

.display > span{
  font-weight: bold;
  color: #ff6600;
}

JavaScript

//string objects
var str = "Hello from Easy Programming";

document.getElementById("myString").innerText = str;

//string.length will give you the length of the string
document.getElementById("length").innerText = str.length;

//string.indexOf("text to search") - get the index number of the first character of the string
document.getElementById("indexOf").innerText = str.indexOf("Easy");

//string.search("text to search") search for specific text in a longer string
document.getElementById("search").innerText = str.search("Easy");

//string.slice(beginning character, ending character) - provide the index numbers of where to start and where to end
document.getElementById("slice").innerText = str.slice(11,15);

//string.substring(where to start, [where to end]) - provide index number of where to start but where to end is optional
document.getElementById("substring").innerText = str.substring(11);

//string.substr(where to start, how many characters to extract) - two arguments, where to start and how much to extract
document.getElementById("substr").innerText = str.substr(11,16);

//string.replace(find text, replace text) - simple find/replace, find the first text, replace with second
document.getElementById("replace").innerText = str.replace("Programming","JavaScript");

//string.toUpperCase() - start yelling! No need for any arguments/parameters
document.getElementById("toUpperCase").innerText = str.toUpperCase();

//string.toLowerCase() - use your inside voice! no need for any arguments or parameters
document.getElementById("toLowerCase").innerText = str.toLowerCase();

//string.concat(string 0,string 1, string 2, etc.)
document.getElementById("concat").innerText = str.concat(" ","& Easy JavaScript"); // str1 + " & Easy JavaScript";

//string.charAt(index number) - get the character of a specific index - helpful for iterating through a string!
document.getElementById("charAt").innerText = str.charAt(12);