CODEWITHSUNDEEP
javascripthtmlreplace
Kojichan
Kojichan

Reputation: 53

getElementById replace HTML

<script type="text/javascript">
   var haystackText = document.getElementById("navigation").innerHTML;

   var matchText = '<a href="http://mydomain.co/?feed=rss">Subscribe to RSS</a>';

   var replacementText = '<ul><li>Some Other Thing Here</li></ul>';

   var replaced = haystackText.replace(matchText, replacementText);

   document.getElementById("navigation").innerHTML = replaced;
</script>

I'm attempting to try and replace a string of HTML code to be something else. I cannot edit the code directly, so I'm using Javascript to alter the code.

If I use the above method Matching Text on a regular string, such as just 'Subscribe to RSS', I can replace it fine. However, once I try to replace an HTML string, the code 'fails'.

Also, what if the HTML I wish to replace contains line breaks? How would I search for that?

<ul><li>\n</li></ul>

??

What should I be using or doing instead of this? Or am I just missing a small step? I did search around here, but maybe my keywords for the search weren't optimal to find a result that fit my situation...

Edit: Gonna mention, I'm writing this script in the footer of my page, well after the text I wish to replace, so it's not an issue of the script being written before what I want to overwrite to appear. :)

Upvotes: 3

Views: 16120

Answers (5)

Aleksi Yrttiaho
Aleksi Yrttiaho

Reputation: 8446

Currently you are using String.replace(substring, replacement) that will search for an exact match of the substring and replace it with the replacement e.g. 

"Hello world".replace("world", "Kojichan") => "Hello Kojichan"

The problem with exact matches is that it doesn't allow anything else but exact matches.

To solve the problem, you'll have to start to use regular expressions. When using regular expression you have to be aware of

  • special characters such as ?, /, and \ that need to escaped \?, \/, \\
  • multiline mode /regexp/m
  • global matching if you want to replace more than one instance of the expression /regexp/g
  • closures for allowing multiple instances of white space \s+ for [1..n] white-space characters and \s* for [0..n] white-space characters.

To use regular expression instead of substring matching you just need to change String.replace("substring", "replacement") to String.replace(/regexp/, "replacement") e.g. 

"Hello world".replace(/world/, "Kojichan") => "Hello Kojichan"

Upvotes: 2

Lance Roberts
Lance Roberts

Reputation: 22842

From MDN:

Note: If a <div>, <span>, or <noembed> node has a child text node that
includes the characters (&), (<), or (>), innerHTML returns these
characters as &amp, &lt and &gt respectively. Use element.textContent
to get a correct copy of these text nodes' contents.

So since textContent (or innerText) won't get you the HTML, you'd have to modify your search string appropriately.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707496

Regular expression matching of HTML (other than plain text) that comes out of a web page is a bad idea and is troublesome to make work cross browser (particularly in IE). The HTML that comes out of a web page does not always look the same as what was put in because some browser reconstitute the HTML and don't actually store what went in. Attributes can change order, quote marks can change or disappear, entities can change, etc...

If you want to modify whole tags, then you should directly access the DOM and operate on the actual objects in the page.

Upvotes: 0

Ghostoy
Ghostoy

Reputation: 2759

Recommend to use Regular Expression. Notice that ? and / are special characters in Regular Expression. And for global multi-line matching, you need g and m flags set in the regular expression.

Upvotes: 0

lbrandao
lbrandao

Reputation: 4373

You can use Regular Expressions.

Upvotes: 0

Related Questions