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,

You have to escape _all_ special characters first, there are a bunch there... Then pass the string into the regex constructor. Check [this question](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454) though because you may not want to do this with regex but with the DOM instead. — elclanrs, Jun 16 '13 at 20:55
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 — James J, Jun 16 '13 at 21:04

score 1 · Answer 1 · answered Jun 16 '13 at 21:13

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

answered Jun 16 '13 at 21:13

Xotic750

22,914
8
57
79

That would work Xotic, but there are other a links in the same div, hence the targeting of the specific one by string – James J Jun 16 '13 at 21:31
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: http://www.w3schools.com/htmldom/ – Xotic750 Jun 16 '13 at 21:36
@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. – Arjan Jun 16 '13 at 21:50
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. – Xotic750 Jun 16 '13 at 21:59
@Arjan could the example about be used to target a specific element then? – James J Jun 16 '13 at 22:20
@Xotic750: There's probably some reasonable tutorials, but there's also a lot of not so reasonable tutorials. See also www.w3fools.com, they list some alternatives such as [MDN](https://developer.mozilla.org/en-US/docs/Web/API/) too. – Arjan Jun 17 '13 at 05:31
Sadly, such is the case with the internet (and many other media), "all that you read is not the truth" :) – Xotic750 Jun 17 '13 at 12:48
Here is the MDN equivalent https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core – Xotic750 Jun 17 '13 at 12:58

score 0 · Answer 2 · answered Jun 16 '13 at 21:14

0

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.

answered Jun 16 '13 at 21:14

mpm

20,148
7
50
55

That would work mpm, but there are other a links in the same div, hence the targeting of the specific one by string – James J Jun 16 '13 at 21:31

score 0 · Answer 3 · answered Jun 17 '13 at 06:03

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.

A note on `getAttribute` and `setAttribute` compatability, http://veerasundar.com/blog/2010/12/javascript-getattribute-method/ — Xotic750, Jun 17 '13 at 13:06

Javascript Replace Function

3 Answers3