Simple javascript needed....

Kurt · 09-15-2009, 04:55 AM

Can any JS experts help me with what I think is a pretty easy script?

What I need is an input box.

User inserts a word/phrase into box and presses "go".

The word/phrase is than added to multiple URLs on the webpage, replacing some type of token.

When replacing the token, any blank spaces between keywords needs to be replaced with either: + or %20

Example..Page has following URLs:
www.Google.com/search=[keywords]
www.home.com/[keywords].html

Basically, it's really just a simple search/replace function, with the "find" always [keyword] but needs to be broswer based and fill in the blank spaced between keywords.

Thanks in advance...

Steve Diamond · 09-15-2009, 01:18 PM

Hi, Kurt. Try this:

HTML Code:

<html>
<head>
<script type="text/javascript">
var savedLinks = new Array();

function replaceKW(theStr, theKW) {
	var fixKW = theKW.replace(/ /g,'+');
	var fixStr = theStr.replace('[keywords]',fixKW);
	var fixStr = fixStr.replace('%5Bkeywords%5D',fixKW);
	return fixStr;
}

function doReplace() {
	var theKW = document.getElementById('keywords').value;
	var links = document.getElementsByTagName('a');
	for (var k=0; k<links.length; k++) {
		var theLink = links[k];
		theLink.href = replaceKW(theLink.href, theKW);
		theLink.innerHTML = replaceKW(theLink.innerHTML, theKW);
	}
}

function saveLinks() {
	var links = document.getElementsByTagName('a');
	for (var k=0; k<links.length; k++) {
		var theLink = links[k];
		savedLinks[k] = new Object();
		savedLinks[k]['href'] = theLink.href;
		savedLinks[k]['html'] = theLink.innerHTML;
	}
}

function restoreLinks() {
	var links = document.getElementsByTagName('a');
	for (var k=0; k<links.length; k++) {
		var theLink = links[k];
		theLink.href = savedLinks[k]['href'];
		theLink.innerHTML = savedLinks[k]['html'];
	}
}
</script>
</head>
<body onload="saveLinks();">
	<form onsubmit="return false;">
		Keywords: <input type="text" id="keywords" /> <input type="submit" value="Go" onclick="doReplace();" /><br /><br />
		<input type="submit" value="Restore" onclick="restoreLinks();" />
	</form>
	<a href="http://www.Google.com/search=[keywords]">www.Google.com/search=[keywords]</a><br /><br />
	<a href="http://www.home.com/[keywords].html">www.home.com/[keywords].html</a><br /><br />
	<a href="http://www.home.com/nokeywords.html">www.home.com/nokeywords.html</a>
</body>
</html>

Note that the Restore button will work correctly if and only if no other script has changed any of the links on the page since the time the page was loaded.

HTH.

Steve

Kurt · 09-15-2009, 05:22 PM

Wow Steve,

Thanks a lot..l.And the reset button was something I didn't think about at all, but now see why it's needed.

Steve Diamond · 09-16-2009, 10:26 AM

Quote:

Originally Posted by Kurt

Wow Steve,

Thanks a lot.

You're very welcome.

Quote:

Originally Posted by Kurt

And the reset button was something I didn't think about at all, but now see why it's needed.

Well, that's why I get paid the big bucks

as a requirements analyst. I'm trained to anticipate unstated requirements before their absence bites anyone in the butt.

Steve

raj564 · 09-16-2009, 11:08 AM

thats a really handy script. thanks!

723Media · 09-16-2009, 06:33 PM

Hey guys,

I know you needed just a simple script so it may not be an option for you but you could use jQuery and do all of Steve's functionality in about 2 lines.

If you're interested, I can post some sample code.

Steve Diamond · 09-16-2009, 06:42 PM

I don't know about anyone else, but I for one would be delighted to see how to do this using jQuery. It's one of the next things on my to-learn list.

Thanks.

Steve

723Media · 09-16-2009, 08:07 PM

Hey Steven,

I put together a quick script. It looks a little intense because of jQuery's awesome chaining abilities but I will break down each part.

BTW, if you like javascript, you will fall in love with jQuery. I am an addict.

Ok, so for this example, I only did the replacement portion to give an idea of how to do this. Here's the code:

The jquery portion:

Code:

<script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btnGo").click(function(e){
                
                e.preventDefault();
                
                $('.keyword').each(function(){
$(this).attr('href', $(this).attr('href').replace('[keywords]','sample')).html($(this).html().replace('[keywords]', 'sample'));
                });
                
            });
        });
    </script>

The HTML portion:

Code:

    <input type="button" id="btnGo" value="Go"/>

Ok, I can't post a link or get it to even represent a link but, the link will have a class="keyword" added to the a tag.

I attached a file with the basic example.

Keeping in mind that the anchor tag has a class of "keyword", let's break this down:

This class of "keyword" is how we will make the anchor tags accessible to jQuery. You could use other methods but that's another story.

So for the jQuery portion.

Lets break it down from start to finish.

Code:

$(document).ready(function(){

This line of code tells jQuery to perform some kind of event or action once the DOM (document) is fully loaded and ready.

Code:

$('#btnGo').click(function(e){

If you notice in the HTML portion, the button has an id of "btnGo". jQuery uses CSS selectors to grab elements in the document. In this case we are saying to jQuery : "Grab the element with the ID (#) of btnGo".

Code:

e.preventDefault();

Since this element is a button, we don't want it's default click event to fire because we want to do some custom event(s). So, this line tells jQuery to prevent the default action.

Now, if you're a nerd like me, is when it gets cool.

Code:

$('.keyword').each(function(){$(this).attr('href',$(this).attr('href').replace('[keywords]','sample')).html($(this).html().replace('[keywords]', 'sample'));

Ok, using the "keyword" class that we gave our links, we tell jQuery to find each one - (".keyword").each and perform a function.

Each is a built loop that will do as it suggests, find each one and perform a custom function.

Code:

$(this).attr('href',$(this).attr('href').replace('[keywords]','sample')).html($(this).html().replace('[keywords]', 'sample'));

In this case, I want to grab each one, read its href attribute and replace the token '[keywords]' with 'sample'. Through the power of chaining, I simply add the fact that I want to also replace the html of the link (it's text value) with the current html, replacing the token with 'sample'.

So, though it was actually more than 2 lines, you can see how jQuery can really reduce code and provide a nice elegant way to do things (once you get the nuances down).

Hope that was fun

Dave

723Media · 09-16-2009, 08:10 PM

Sorry for taking so long. It took forever getting this post past the regular expressions. I also had some trouble attaching the file. If youre interested in it, PM me.

Steve Diamond · 09-16-2009, 09:33 PM

Hi, Dave. Thanks for the jQuery tutorial! Very interesting. Looks like powerful stuff, but the syntax isn't exactly intuitive, is it? I'll have to do some tinkering to get comfortable.

I'll PM you my email so you can send the file.

Steve

09-15-2009, 04:55 AM	#1
Kurt Boom Boom Boom Boom! War Room Member Join Date: Oct 2002 Location: Rocky Mountain High Country Posts: 5,593 Thanks: 833 Thanked 2,535 Times in 1,392 Posts Social Networking	Simple javascript needed.... Can any JS experts help me with what I think is a pretty easy script? What I need is an input box. User inserts a word/phrase into box and presses "go". The word/phrase is than added to multiple URLs on the webpage, replacing some type of token. When replacing the token, any blank spaces between keywords needs to be replaced with either: + or %20 Example..Page has following URLs: www.Google.com/search=[keywords] www.home.com/[keywords].html Basically, it's really just a simple search/replace function, with the "find" always [keyword] but needs to be broswer based and fill in the blank spaced between keywords. Thanks in advance...
	Think Links 2012 New and Improved! Includes: Massive Collection of Link Resources Extreme On Page SEO Indepth Guide to SEO/Link Tools and Automation Much Much More..

09-15-2009, 01:18 PM	#2
Steve Diamond Senior Warrior Member War Room Member Join Date: Apr 2006 Location: Tucson, AZ, USA. Posts: 1,025 Thanks: 120 Thanked 158 Times in 115 Posts Social Networking Contact Info	Re: Simple javascript needed.... Hi, Kurt. Try this: HTML Code: <html> <head> <script type="text/javascript"> var savedLinks = new Array(); function replaceKW(theStr, theKW) { var fixKW = theKW.replace(/ /g,'+'); var fixStr = theStr.replace('[keywords]',fixKW); var fixStr = fixStr.replace('%5Bkeywords%5D',fixKW); return fixStr; } function doReplace() { var theKW = document.getElementById('keywords').value; var links = document.getElementsByTagName('a'); for (var k=0; k<links.length; k++) { var theLink = links[k]; theLink.href = replaceKW(theLink.href, theKW); theLink.innerHTML = replaceKW(theLink.innerHTML, theKW); } } function saveLinks() { var links = document.getElementsByTagName('a'); for (var k=0; k<links.length; k++) { var theLink = links[k]; savedLinks[k] = new Object(); savedLinks[k]['href'] = theLink.href; savedLinks[k]['html'] = theLink.innerHTML; } } function restoreLinks() { var links = document.getElementsByTagName('a'); for (var k=0; k<links.length; k++) { var theLink = links[k]; theLink.href = savedLinks[k]['href']; theLink.innerHTML = savedLinks[k]['html']; } } </script> </head> <body onload="saveLinks();"> <form onsubmit="return false;"> Keywords: <input type="text" id="keywords" /> <input type="submit" value="Go" onclick="doReplace();" /><br /><br /> <input type="submit" value="Restore" onclick="restoreLinks();" /> </form> <a href="http://www.Google.com/search=[keywords]">www.Google.com/search=[keywords]</a><br /><br /> <a href="http://www.home.com/[keywords].html">www.home.com/[keywords].html</a><br /><br /> <a href="http://www.home.com/nokeywords.html">www.home.com/nokeywords.html</a> </body> </html> Note that the Restore button will work correctly if and only if no other script has changed any of the links on the page since the time the page was loaded. HTH. Steve
	Executive I.T. consulting for small/medium business Website development \| PHP - MySQL - JavaScript expert programming Software requirements analysis \| Specification writing Project management \| Vendor relationship management

09-15-2009, 05:22 PM	#3
Kurt Boom Boom Boom Boom! War Room Member Join Date: Oct 2002 Location: Rocky Mountain High Country Posts: 5,593 Thanks: 833 Thanked 2,535 Times in 1,392 Posts Social Networking	Re: Simple javascript needed.... Wow Steve, Thanks a lot..l.And the reset button was something I didn't think about at all, but now see why it's needed.
	Think Links 2012 New and Improved! Includes: Massive Collection of Link Resources Extreme On Page SEO Indepth Guide to SEO/Link Tools and Automation Much Much More..

09-16-2009, 11:08 AM	#5
raj564 Active Warrior Join Date: Aug 2008 Location: , , . Posts: 50 Thanks: 0 Thanked 2 Times in 2 Posts	Re: Simple javascript needed.... thats a really handy script. thanks!

09-16-2009, 06:33 PM	#6
723Media HyperActive Warrior War Room Member Join Date: Aug 2009 Posts: 107 Thanks: 3 Thanked 18 Times in 11 Posts	Re: Simple javascript needed.... Hey guys, I know you needed just a simple script so it may not be an option for you but you could use jQuery and do all of Steve's functionality in about 2 lines. If you're interested, I can post some sample code.

09-16-2009, 06:42 PM	#7
Steve Diamond Senior Warrior Member War Room Member Join Date: Apr 2006 Location: Tucson, AZ, USA. Posts: 1,025 Thanks: 120 Thanked 158 Times in 115 Posts Social Networking Contact Info	Re: Simple javascript needed.... I don't know about anyone else, but I for one would be delighted to see how to do this using jQuery. It's one of the next things on my to-learn list. Thanks. Steve
	Executive I.T. consulting for small/medium business Website development \| PHP - MySQL - JavaScript expert programming Software requirements analysis \| Specification writing Project management \| Vendor relationship management

09-16-2009, 08:07 PM	#8
723Media HyperActive Warrior War Room Member Join Date: Aug 2009 Posts: 107 Thanks: 3 Thanked 18 Times in 11 Posts	Re: Simple javascript needed.... Hey Steven, I put together a quick script. It looks a little intense because of jQuery's awesome chaining abilities but I will break down each part. BTW, if you like javascript, you will fall in love with jQuery. I am an addict. Ok, so for this example, I only did the replacement portion to give an idea of how to do this. Here's the code: The jquery portion: Code: <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btnGo").click(function(e){ e.preventDefault(); $('.keyword').each(function(){ $(this).attr('href', $(this).attr('href').replace('[keywords]','sample')).html($(this).html().replace('[keywords]', 'sample')); }); }); }); </script> The HTML portion: Code: <input type="button" id="btnGo" value="Go"/> Ok, I can't post a link or get it to even represent a link but, the link will have a class="keyword" added to the a tag. I attached a file with the basic example. Keeping in mind that the anchor tag has a class of "keyword", let's break this down: This class of "keyword" is how we will make the anchor tags accessible to jQuery. You could use other methods but that's another story. So for the jQuery portion. Lets break it down from start to finish. Code: $(document).ready(function(){ This line of code tells jQuery to perform some kind of event or action once the DOM (document) is fully loaded and ready. Code: $('#btnGo').click(function(e){ If you notice in the HTML portion, the button has an id of "btnGo". jQuery uses CSS selectors to grab elements in the document. In this case we are saying to jQuery : "Grab the element with the ID (#) of btnGo". Code: e.preventDefault(); Since this element is a button, we don't want it's default click event to fire because we want to do some custom event(s). So, this line tells jQuery to prevent the default action. Now, if you're a nerd like me, is when it gets cool. Code: $('.keyword').each(function(){$(this).attr('href',$(this).attr('href').replace('[keywords]','sample')).html($(this).html().replace('[keywords]', 'sample')); Ok, using the "keyword" class that we gave our links, we tell jQuery to find each one - (".keyword").each and perform a function. Each is a built loop that will do as it suggests, find each one and perform a custom function. Code: $(this).attr('href',$(this).attr('href').replace('[keywords]','sample')).html($(this).html().replace('[keywords]', 'sample')); In this case, I want to grab each one, read its href attribute and replace the token '[keywords]' with 'sample'. Through the power of chaining, I simply add the fact that I want to also replace the html of the link (it's text value) with the current html, replacing the token with 'sample'. So, though it was actually more than 2 lines, you can see how jQuery can really reduce code and provide a nice elegant way to do things (once you get the nuances down). Hope that was fun Dave
	http://socialeers.com http://graphicriver.net/user/723media/portfolio

09-16-2009, 08:10 PM	#9
723Media HyperActive Warrior War Room Member Join Date: Aug 2009 Posts: 107 Thanks: 3 Thanked 18 Times in 11 Posts	Re: Simple javascript needed.... Sorry for taking so long. It took forever getting this post past the regular expressions. I also had some trouble attaching the file. If youre interested in it, PM me.
	http://socialeers.com http://graphicriver.net/user/723media/portfolio

09-16-2009, 09:33 PM	#10
Steve Diamond Senior Warrior Member War Room Member Join Date: Apr 2006 Location: Tucson, AZ, USA. Posts: 1,025 Thanks: 120 Thanked 158 Times in 115 Posts Social Networking Contact Info	Re: Simple javascript needed.... Hi, Dave. Thanks for the jQuery tutorial! Very interesting. Looks like powerful stuff, but the syntax isn't exactly intuitive, is it? I'll have to do some tinkering to get comfortable. I'll PM you my email so you can send the file. Steve
	Executive I.T. consulting for small/medium business Website development \| PHP - MySQL - JavaScript expert programming Software requirements analysis \| Specification writing Project management \| Vendor relationship management