How To Remove Space From String Using JavaScript

Let’s assume that we have a string with the word “S t r i n g”. Note that each letter of the word is separated by a space. Now we will remove the space between each of these letters.

Example 1: Remove all spaces completely

<script type="text/javascript">

var original_str = "S t r i n g"

//Strips all spaces
var space_stripped_str = original_str.replace(/\s/g,'');

alert(space_stripped_str + ' <---- Without spaces');

</script>

When you run the above code, you will see an alert that gives you the following output: “String”

Example 2: Remove multiple spaces and replace them with single space

<script type="text/javascript">

var original_str2 = "S    t    r  in  g"
//Strips excessive white spaces i.e. retains only one space between each letter
var white_space_stripped_str = original_str2.replace(/\s+/g, ' ');

alert(white_space_stripped_str + ' <---- With exactly one space between each letter in case each letter has multiple spaces');

</script>

Example 3: Remove spaces completely (trim) from left of the string

<script type="text/javascript">

var original_str3 = "   This is a string"

//Strips all space to the left of the string
alert( original_str3.trimLeft() + ' <--- Without any spaces on the left' );

</script>

Example 4: Remove spaces completely (trim) from right of the string

<script type="text/javascript">

var original_str4 = "This is a string   "

//Strips all space to the right of the string
alert( original_str4.trimRight() + ' <--- Without any spaces on the right' );

</script>

Isn’t that easy? Your Turn Now!

Do you know of any other ways to remove spaces using JavaScript from a word or a string? Please feel free to suggest by commenting below.

How To Prepopulate Textarea With Custom Hint Using JavaScript

Let’s assume that we have a textarea in a form on our page. Now instead of hardcoding the value inside it, we will populate the textarea hint based upon the onfocus and onblur events. Consider the following example:

Example 1: Prepopulate Textarea with Hint and Lose Hint forever once any input has been entered or entered and removed

<textarea name="message1" cols="25" rows="5" id="area" onclick="document.getElementById('area').innerHTML='';" >Enter your message here</textarea>

Example 2: Prepopulate Textarea with Hint and Restore Default Hint even if the input has been entered  and removed

<textarea name="message2" cols="25" rows="5" id="message2" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;">Enter your message here</textarea>

That’s it!

Do you know of any other ways to show / hide textarea hint using JavaScript? Feel free to suggest by commenting below.

How To Jump To Div Using JavaScript

Let’s assume that we have few divs with ID “my_div1”, “my_div1” and “my_div3” in a page. my_div1 is filled with lot of empty space. So this means that to actually view the contents of my_div2, you would normally have to scroll down, once the page loads. Now instead of this, we  would like to actually jump to my_div2 immediately on the page load. Note that these are all divs and not named anchors. The following example code achieves this effect.

Example:

<style type="text/css">
.new_div {
	background-color: #FFDF9D;
	border: 1px solid #F90;
}
</style>

<div id="my_div1" class="new_div">This is MY DIV 1
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

</div>

<div id="my_div2" class="new_div">This is MY DIV 2 --- You will directly start seeing this section instead of the My DIV 1 when the page loads. THis is because of the jump to div using the JavaScript code below.
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
</div>

<div id="my_div3" class="new_div">This is MY DIV 3</div>

<script language="javascript" type="text/javascript">
document.getElementById('my_div2').scrollIntoView();
</script>

Your Turn!

Do you know of any other ways to jump to any desired div using JavaScript on page load? Feel free to suggest by commenting below.

How to use JavaScript to Check If Textbox Is Empty?

For this example, I am assuming that we have a Textbox in a form and we need to check if this textbox is empty or not when the “Check” button is clicked.

Example: Check if Textbox has contents or if it is empty using JavaScript

<script Language="JavaScript">
<!--
function check_blank()
{
// If the value of the textbox is empty, then show an alert
if (my_form.state.value == "")
{
alert("Please fill in State.");

// Focus the textbox so that user can fill it
my_form.state.focus();

// return false to stop further processing
return false;
}

// If state is not null continue processing
return true;
}
-->
</script>

<form name="my_form" id="my_form" action="#" onsubmit="return check_blank();">
<label for="state">State</label>
<input type="text" name="state" id="state" >
<input type="submit" value="Check">
</form>

Once you run the above code and click the “Check” button, the page will show an alert. If you enter something in it and then click the button, the form will quietly submit the info.

Simple, isn’t it?

Do you know of any other ways to use JavaScript to check if textbox is empty? Feel free to suggest by commenting below.

How to use Substring in JavaScript / jQuery

So as the definition says, substring() method extracts the characters from a string by extracting the characters in a string between “from” and “to”. This will exclude  the “to” itself.

Example: Use Substring in jQuery/JavaScript

<html>
<head>
<title>Examples to use JavaScript Substring / jQuery Substring</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>

<script>

var str="This is some custom text";
document.write(str.substring(6)); //O/P: s some custom text
document.write("<br>");

document.write(str.substring(4,1)); //O/P: his
document.write("<br>");

document.write(str.substring(4,4)); //O/P: 
document.write("<br>");

document.write(str.substring(4,10)); //O/P: is so
document.write("<br>");

document.write(str.substring(1,10)); //O/P: his is so
document.write("<br>");

document.write(str.substring(1,20)); //O/P: his is some custom 
document.write("<br>");

</script>

</body>
</html>

 That’s it!

Do you know of any other ways to use substring using jQuery / JavaScript? Feel free to suggest by commenting below.

How to use JavaScript to Get Image Dimensions (Width & Height)

Following is the complete HTML + JavaScript source code that shows how to get the image dimensions (width & height) when the page is loaded:

Example: Get Image Width & Height (dimensions) using JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Get Image Dimensions</title>
</head>

<body>

<img src="images/banner.png" id="my_img" />

<script type="text/javascript">

var img = document.getElementById('my_img');

var width = img.clientWidth;

var height = img.clientHeight;

alert( 'Width: ' + width + ' Height:' + height );

</script>
</body>
</html>

The given code assumes that there is an image with ID “my_img” and the dimensions of this image needs to be found. When the above code is executed, the page will alert the width and height of the image.

Note

The image has to be completely loaded in order to get it’s size, or the width & height values are incorrectly shown as zero.

That’s it!

Do you know of any other ways to find image width and height using JavaScript? Feel free to share by commenting below.

How To Remove Iframe html using Javascript Example

Let’s assume that we have an IFrame with ID “myframe”. We can use the .setAttribute() method to completely remove the html contents from the Iframe.

Example: Remove Iframe html using Javascript

//HTML:

<iframe id="myframe" src="http://www.google.com"></iframe>

//Javascript:

document.getElementById( 'myframe' ).setAttribute( 'src', '' );

When you use the above code in your own web page and run it, you will see the contents of the iframe cease to exist. Easy, eh?

Your Turn!

Do you know of any other ways of using JavaScript to remove iframe html? Feel free to share by commenting below.

Example to Add minutes to date using JavaScript

Here is a simple example that shows how to add minutes to date using JavaScript:

<script language="javascript" type="text/javascript">
//The current date
var date = new Date ();
//New/future date
var new_date = new Date ( date );
//Minutes to add_action. Change this as required
var minutes = 60;
//Add the minutes to current date to arrive at the new date
new_date.setMinutes ( date.getMinutes() + minutes );
//Output the old + new date
document.write('Old Date: ' + date + '<br /> New Date:' + new_date);
//Output is:
//Old Date: Thu Mar 08 2012 11:42:11
//New Date: Thu Mar 08 2012 12:42:11
//Note: The above values also shows the Timezone, but I have removed it for simplicity from the example

//If you do not want to show the current date but need to show only the new date, then this can be further simplified as:
var revised_date = new Date();
revised_date.setMinutes(revised_date.getMinutes() + minutes);
document.write('<br /> ' + revised_date);
//Output is Thu Mar 08 2012 12:42:11
</script>

Simple, isnt’ it?

Do you know of any other ways to Add minutes to date  using JavaScript? Feel free to suggest by commenting below.

How to use Javascript to Check if a value is in an array – Examples

Example 1: Here is the full JavaScript code you need to check if a value is in an array or not:

my_array = Array();

//To find if a value or element exists in an array
if (my_array.indexOf(‘find_this_value’) != -1)
{
alert(‘Value exists in array.’);
}

//To find if a value or element DOES NOT exist in an array
if (my_array.indexOf(‘find_this_value’) == -1)
{
alert(‘Value does not exist in array.’);
}

Example 2: Check whether a string is a part of an array value i.e. match a string with just part of the array value

function search_for_string_in_array(search_for_string, array_to_search) 
{
    for (var i=0; i<array_to_search.length; i++) 
	{
        if (array_to_search[i].match(search_for_string))
		{ 
			return 'Value exists in array';
		}
    }

    return 'Value does NOT exist in array';
}

var my_array = ["test one", "test two", "test three"];

alert( search_for_string_in_array ('two', my_array) );

Simply pass the value to search for and the array to the function and it will tell you whether the string exists as a part of an array value or not.

Simple, isn’t it?

Do you know of any other way to check  if a value or an element exists in an array or not in JavaScript? If yes, please share your tips with us by commenting below.

How to Detect iPhone, iPod, iPad using JavaScript – Examples

Insert the following snippet just above your </head> tag:

<script type="text/javascript">
//Make your JS compatible by using the following tags
//<![CDATA[

// Apple detection object
var Apple = {};
Apple.UA = navigator.userAgent;
Apple.Device = false;
Apple.Types = ["iPhone", "iPod", "iPad"];
for (var d = 0; d < Apple.Types.length; d++) {
var t = Apple.Types[d];
Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
Apple.Device = Apple.Device || Apple[t];
}
// is this an Apple device?
/*alert(
"Apple device? " + Apple.Device +
"\niPhone? " + Apple.iPhone +
"\niPod? " + Apple.iPod +
"\niPad? " + Apple.iPad
);*/
if ( true == Apple.iPhone )
{
 //do this
}
else  if ( true == Apple.iPod )
{
//do this
}
else  if ( true == Apple.iPad )
{
//do this
}

//]]>
</script>

That’s it!

Did you like this post? Do you know of any other ways to detect iPhone, iPod, iPad using JavaScript? Feel free to suggest by commenting below. We would love to hear from you.