Javascript Replace Function

Question

Okay I'm probably being thick, but I can't get something to work and its bugging me why. I'm using the global replace property in Javascript, but whenever I do it wont work outisde the DIV I'm in.

The DIV I'm in isnt the one I need to target, but a simplified example is below.

<div id="foo">
<a href="http://www.somesite.com" target="_blank" class="footer">Site 1</a>
</div>
<script type="text/javascript">
window.onload = function replaceScript() {
 var replacement = '<a href="http://www.somesite.com" target="_blank" class="footer">Site 1</a>';
var text = '<a href="http://www.othersite.com" title="Other Site" target="_blank">Site 2</a>';
document.getElementById("foo").innerHTML = text.replace(new RegExp(replacement, 'g'), '');
}
</script>

The other way I was trying it was this:

<script type="text/javascript">
window.onload = function replaceScript() {
var toReplace = '<a href="http://www.somesite.com" target="_blank" class="footer">Site 1</a>';
var replaceWith ='<a href="http://www.othersite.com" title="Other Site" target="_blank">Site 2</a>';
document.getElementById("foo") = document.body.innerHTML.replace(toReplace, replaceWith);
}
</script>

But I can't get that one to work globally,

• elclanrs: You have to escape all special characters first, there are a bunch there... Then pass the string into the regex constructor. Check this question though because you may not want to do this with regex but with the DOM instead.
• James J: I didnt know that you couldnt do that with regex, sorry. The one below I tried and works fine except will only target in the div its in

Answer 1

I don't think you want to be doing this with a regex, you should use DOM methods instead, like this

HTML

<div id="foo">
<a href="http://www.somesite.com" target="_blank" class="footer">Site 1</a>
</div>

Javascript

var fooA = document.getElementById("foo").children[0];
fooA.href = "http://www.othersite.com";
fooA.title = "Other Site";
fooA.firstChild.nodeValue = "Site 2";

Result

<div id="foo">
<a href="http://www.othersite.com" target="_blank" class="footer" title="Other Site">Site 2</a>
</div>

On jsfiddle

• James J: That would work Xotic, but there are other a links in the same div, hence the targeting of the specific one by string
• Xotic750: But this is targeted by NODE or by ELEMENT and hence is far more specific than anything you are attempting with a regex, and much safer. Try reading this as a basic tutorial: w3schools.com/htmldom
• Arjan: @JamesJ: Using a string (or regular expression) to target a specific element is a bad idea. You can't be sure about the order of the attributes you are trying to match, and if the order does not match then the string won't match even though you would think it's correct. If you use DOM elements you can check the attributes without having to worry which one comes first.
• Xotic750: I didn't claim it to be the best, but it is none the less a useful source and has some reasonable tutorials. Feel free to point to a better one.
• James J: @Arjan could the example about be used to target a specific element then?

Answer 2

not sure what you are trying to do ,but it makes sense to change your code.

var child= document.querySelector("#foo a");
child.href="http://otherside.com"
child.title="Site2"
child.innerText= "Site2"

works on IE>=8 and all the other browers.

• James J: That would work mpm, but there are other a links in the same div, hence the targeting of the specific one by string

Answer 3

Instead of using string comparisons, you should use DOM elements. This also creates more readable and easier to maintain code, because it is more descriptive.

var element = document.getElementById("foo"); 
var links = element.getElementsByTagName("a"); // get all links that are children of the div foo 
for (var i = 0; i < links.length; i++) { // Loop over the list
 if (links[i].getAttribute("href") == "http://www.somesite.com" ) { // Identify the link(s) we need to change
 links[i].setAttribute('href', 'http://otherside.com');
 links[i].setAttribute('title', 'Site2');
 links[i].innerHtml = 'Site2';
 // note that links[i].textContent would be better but it is not as cross browser compatible
 }
}

Note that this does not require any javascript frameworks. If you are using a framework like jQuery, you might be able to simplify this.

• Xotic750: A note on getAttribute and setAttribute compatability, veerasundar.com/blog/2010/12/javascript-getattribute-method