Replacing HTML Tags on page load

[Galenz]

Hi, I'm trying to write a simple function that will replace some text with an href link.

My current code only half works. The open tag "<a ..." is created ok, but the end tag "</a>" doesn't get created.

Does anyone know what I'm doing wrong?

My page has some user content with temporary tags that relate to external documents. I want the users to type in these tags rather than learn how to endit a proper href tag.
e.g. "{doc}547551{/doc}"

I have a basic Replace function which I call on the OnLoad event of the Body tag.

function ReplaceAll(searchText, replaceText) {
var intIndex = document.body.innerHTML.indexOf(searchText);
while (intIndex != -1) {
document.body.innerHTML = document.body.innerHTML.replace(searchText, replaceText);
intIndex = document.body.innerHTML.indexOf(searchText);
}

}

I call this function to replace the temporary tags using the following:
ret = ReplaceAll("{doc}", "<a href='OpenDocument.aspx?DocNumber='");
ret = ReplaceAll("{enddoc}", "'>link</a>");



When I change the replace text to use the bold tags "<b>...</b>" it seems to work fine. But the "<a>..</a>" tags don't work.

Any ideas are welcome.

 

[BillyRayPreachersSon]

Testing in Chrome shows that creating an anchor without closing it (which your first replace does) truncates the content at the point the anchor is opened. e.g. this code results in only "abc" being present:

var b = document.body;
b.innerHTML = 'abc def ghi'.replace('def', '<a href="def"');

Not only that, but performing two replace operations on the innerHTML is going to be a lot worse performance-wise than performing only one. So, if you want to stick with using .innerHTML, copy it into a variable first, then perform both replace operations, and then copy it back:

var b = document.body;
b.innerHTML = 'abc def ghi jkl';
var s = b.innerHTML;
s = s.replace('def', '<a href="def"');
s = s.replace('ghi', '">link</a>');
b.innerHTML = s;

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

 

[BillyRayPreachersSon]

Incidentally, there's no difference in complexity to get the user to enter this:

<a>547551</a>

instead of this:

{doc}547551{/doc}

and the former is 4 bytes less typing than the latter. So, why not get them to enter the anchor tag and use DOM methods to add the HREF attribute? That way you've got no search / replace issues to deal with, and they won't have to do as much typing.

You've already seen one of the problems with using innerHTML. Another is speed - the entire page will be re-rendered each time you set the body's .innerHTML - and you're doing it twice. Another issue is that earlier versions of IE strip quotes from around attributes when reading the innerHTML property. If your users are still using an older IE, and [!]any[/!] of your attributes have spaces in their values, this will lead to them being set incorrectly.

Hope this helps,

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

 

[feherke]

Hi

The two separate replaces are definitely a wrong approach.

Anyway, there is absolutely no need for a function, a single regular expression can solve it :

document[teal].[/teal]body[teal].[/teal]innerHTML [teal]=[/teal] document[teal].[/teal]body[teal].[/teal]innerHTML[teal].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/\{doc\}(\w+)\{\/doc\}/g[/fuchsia][teal],[/teal] [green][i]'<a href="OpenDocument.aspx?DocNumber=$1">$1</a>'[/i][/green][teal]);[/teal]

Personally I do not understand why this replacement is done with client-side scripting and not performed server-side before delivering the content.

Feherke.

http://feherke.github.com/

 

[Galenz]

Thanks feherke, that seems to work well.

I'm having to retro-fit this code to an existing system that can't be easily changed. Yes, it's a bit of a hack, but time and money pressures force me to use the sticking-plaster solution.

Thanks for your help.

 

[feherke]

Hi

As Dan mentioned, multiple modifications of [tt]document.body.innerHTML[/tt] are bad idea. In case you have more similar tags to replace ( I mean, also enclosed in braces ( {} ), also in open & close pairs, just the name & behavior different to "doc" ), note that the [tt]replace()[/tt] method supports callback function, which would help to perform various replacements in a single call. If need assistance with such improvement, just give us details.


Feherke.

http://feherke.github.com/