Help needed with docwrite/regex tricks

**Lasse Reichstein Nielsen** · Jul 20 '05, 01:02 PM

Re: Help needed with docwrite/regex tricks

"Mike Gifford" <mike@openconce pt.ca> writes:
[color=blue]
> I'm sure that there's a way through javascript to convert a piece of code
> like this:
>
> 
>
> to a clickable link like:
>
> <a href="admin/editTemplate.ph p?file=BE_secti onNew-htmlarea2.tpl"> <img
> src="/image/template.png"></a>[/color]

That depends on whether you want to do it in a live page or just in a
piece of text.

If you have it as text, you can do:

someText.replac e(
/<[!]-- START ([^\s]*) -->/g ,
"<a href=\"admin/editTemplate.ph p?file=$1\"><im g "+
"src=\"/image/template.png\"> <\/a>");

If you want to do it on the current page, you can't do it consistently
across browsers. For one, I don't think it is possible in IE.

You don't have access to the source HTML text of the active page, only
the parsed document tree structure. IE doesn't retain comments in that
tree, while, e.g., Mozilla does.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Mike Gifford** · Jul 20 '05, 01:02 PM

Re: Help needed with docwrite/regex tricks

Hello Lasse,

On Mon, 22 Dec 2003 14:02:20 +0100, Lasse Reichstein Nielsen wrote:[color=blue]
> "Mike Gifford" <mike@openconce pt.ca> writes:
>[color=green]
>> I'm sure that there's a way through javascript to convert a piece of
>> code like this:
>>
>> 
>>
>> to a clickable link like:
>>
>> <a href="admin/editTemplate.ph p?file=BE_secti onNew-htmlarea2.tpl"> <img
>> src="/image/template.png"></a>[/color]
>
> That depends on whether you want to do it in a live page or just in a
> piece of text.[/color]

I want to do it on a live page. I'd like to be able to replace all
text/html exported to the browser. Should go from the <body> to </body>.
[color=blue]
> If you have it as text, you can do:
>
> someText.replac e(
> /<[!]-- START ([^\s]*) -->/g ,
> "<a href=\"admin/editTemplate.ph p?file=$1\"><im g "+
> "src=\"/image/template.png\"> <\/a>");
>
> If you want to do it on the current page, you can't do it consistently
> across browsers. For one, I don't think it is possible in IE.[/color]

I'm a Linux user, so getting it working in Mozilla is just fine. Getting
it working in IE is a perc, but why give just one more reason for folks to
use the better browser?

On my box I'm using Mozilla 1.6a
[color=blue]
> You don't have access to the source HTML text of the active page, only
> the parsed document tree structure. IE doesn't retain comments in that
> tree, while, e.g., Mozilla does.[/color]

Ok.. So how would I access the document tree?

My current test page is:

<html>
<head>
<title>Replac e</title>

<script language="JavaS cript">
/g ,
// "<a href=\"admin/editTemplate.ph p?file=$1\"><im g "+ //
"src=\"/image/template.png\"> <\/a>");

function replaceTextFunc tion() {
var text = document.getEle mentById("BE_AL L");
document.getEle mentById("BE_AL L").innerHTM L =
text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
href=\"admin/editTemplate.ph p?file=$1\">Edi t Template<\/a>");
}
}
-->
</script>

</head>

<body ID="BE_ALL">

<form>
<input name="form1" value="replaceT ext" type="submit"
ONCLICK="replac eTextFunction() "/> <br> <textarea name="textarea1 " rows="2"
cols="50">   </textarea>
</form>

 

</body>
</html>

The javascript console error that pops up is:

Error: text.replace is not a function Source File:

http://localhost/replace.html?form1=replaceText&textarea1=%3C%21--

+START+BE_artic lenew-htmlarea2.tpl+--%3E%0D%0A%3C%21--+START+BE_secti onNew.tpl+--%3E%0D%0A
Line: 18

I've been playing around with this for a while now and either get that the
document has no properties or that replace isn't a function.

I can't see why it isn't a function, but......

Any additional help would be appreciated..

Mike

**Richard Cornford** · Jul 20 '05, 01:03 PM

Re: Help needed with docwrite/regex tricks

"Mike Gifford" <mike@openconce pt.ca> wrote in message
news:pan.2003.1 2.22.17.08.27.1 88743@openconce pt.ca...
<snip>[color=blue]
> function replaceTextFunc tion() {
> var text = document.getEle mentById("BE_AL L");[/color]

Here you assign a reference to a DOM element to the - text - variable,
not a string.
[color=blue]
> document.getEle mentById("BE_AL L").innerHTM L =
> text.replace(/<[!]-- START ([^\s]*) -->/g , "<a[/color]

And here you invoke a replace method on the object referenced by the -
text - variable. It doesn't have any such method so you get an error.
[color=blue]
> href=\"admin/editTemplate.ph p?file=$1\">Edi t Template<\/a>");[/color]
<snip>

The balance of probability is that you want to assign the value of the
innerHTML property of the DOM element to the - text - variable. Though
that would still only make invoking a replace method on that string
possible if the browser in question managed to successfully to retrieve
the DOM element and reading the innerHTML property returned a string,
rather than undefined, as would be the case on some browsers. (by which
I mean: your code should be doing a lot more checking to see if what it
is attempting can be achieved on the browser in use and, if so, how
successful the attempt is proving)

Richard.

**Lasse Reichstein Nielsen** · Jul 20 '05, 01:03 PM

Re: Help needed with docwrite/regex tricks

"Mike Gifford" <mike@openconce pt.ca> writes:
[color=blue]
> I'm a Linux user, so getting it working in Mozilla is just fine. Getting
> it working in IE is a perc, but why give just one more reason for folks to
> use the better browser?
>
> On my box I'm using Mozilla 1.6a
>[color=green]
>> You don't have access to the source HTML text of the active page, only
>> the parsed document tree structure. IE doesn't retain comments in that
>> tree, while, e.g., Mozilla does.[/color]
>
> Ok.. So how would I access the document tree?[/color]

That would require understanding the W3C Document Object Model (DOM).
It is a tree structure, and you just traverse it and convert the
comments you meet. You can see some example code here:
<URL:http://www.infimum.dk/privat/commentConverte r.html>
You also need to know how to build new DOM nodes using
document.create Element.

Using innerHTML, as you do, is not as safe. Instead of just removing
the comments and replacing them with new code, you rewrite the entire
document body. If you have event handlers assigned to some of the
nodes, they won't survive the rewrite. If it works, great, but just be
aware that you are creating an entirely new page, and not eveything
about the document is captured by innerHTML.
[color=blue]
> function replaceTextFunc tion() {
> var text = document.getEle mentById("BE_AL L");[/color]

If you chose to use innerHTML, this line should be:
var text = document.body.i nnerHTML;
Then "text" actually contains text (no need for getElementById, the
body element is directly accessible in modern browsers).
[color=blue]
> document.getEle mentById("BE_AL L").innerHTM L =
> text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
> href=\"admin/editTemplate.ph p?file=$1\">Edi t Template<\/a>");[/color]

I assume the linebreak was inserted by your news client. There shouldn't
be linebreaks inside Javascript strings.

[color=blue]
> Error: text.replace is not a function[/color]

Yes, "text" was not a string, so it had no "replace" method.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Mike Gifford** · Jul 20 '05, 01:03 PM

Re: Help needed with docwrite/regex tricks

Hi Richard,

This was what I finally needed to make the script work.
[color=blue]
> The balance of probability is that you want to assign the value of the
> innerHTML property of the DOM element to the - text - variable. Though
> that would still only make invoking a replace method on that string
> possible if the browser in question managed to successfully to retrieve
> the DOM element and reading the innerHTML property returned a string,
> rather than undefined, as would be the case on some browsers. (by which
> I mean: your code should be doing a lot more checking to see if what it
> is attempting can be achieved on the browser in use and, if so, how
> successful the attempt is proving)[/color]

I believe I've added sufficient checking for the browser's capacity, but
I'm not a javascript guy so feel free to correct me.

The code that's working for me in Mozilla is:

<html>
<head>
<title>Replac e</title>
</head>

<body ID="BE_ALL">

<script language="JavaS cript">
/g , "<a
href=\"admin/editTemplate.ph p?file=$1\">Edi t Template<\/a>");
}
}
}
-->
</script>

<form>
<input name="form1" value="replaceT ext" type="submit"
ONCLICK="replac eTextFunction() "/> </form>

</body>
</html>

**Mike Gifford** · Jul 20 '05, 01:03 PM

Re: Help needed with docwrite/regex tricks

Hello Lasse,

On Mon, 22 Dec 2003 20:53:48 +0100, Lasse Reichstein Nielsen wrote:[color=blue][color=green][color=darkred]
>>> You don't have access to the source HTML text of the active page, only
>>> the parsed document tree structure. IE doesn't retain comments in that
>>> tree, while, e.g., Mozilla does.[/color]
>> Ok.. So how would I access the document tree?[/color]
> That would require understanding the W3C Document Object Model (DOM).
> It is a tree structure, and you just traverse it and convert the
> comments you meet. You can see some example code here:
> <URL:http://www.infimum.dk/privat/commentConverte r.html>[/color]

Your script does seem to work better on the files I'm trying to work with.
[color=blue]
> You also need to know how to build new DOM nodes using
> document.create Element.[/color]

I think I understand what this is doing while looking at the code....
[color=blue]
> Using innerHTML, as you do, is not as safe. Instead of just removing
> the comments and replacing them with new code, you rewrite the entire
> document body. If you have event handlers assigned to some of the
> nodes, they won't survive the rewrite. If it works, great, but just be
> aware that you are creating an entirely new page, and not eveything
> about the document is captured by innerHTML.[/color]

I'd prefer to use your code (and give you credits inline). It's for a GPL
project though and need to get your permission to do so. If you have no
objections, great! The project is http://www.back-end.org and we have
quite a few templates which we use...

It works really nicely within a block since all of the javascript can be
defined within the body tags aswell!
[color=blue][color=green]
>> function replaceTextFunc tion() {
>> var text = document.getEle mentById("BE_AL L");[/color]
>
> If you chose to use innerHTML, this line should be:
> var text = document.body.i nnerHTML;
> Then "text" actually contains text (no need for getElementById, the
> body element is directly accessible in modern browsers).
>[color=green]
>> document.getEle mentById("BE_AL L").innerHTM L =
>> text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
>> href=\"admin/editTemplate.ph p?file=$1\">Edi t Template<\/a>");[/color]
>
> I assume the linebreak was inserted by your news client. There shouldn't
> be linebreaks inside Javascript strings.[/color]

I added that for the message.
[color=blue][color=green]
>> Error: text.replace is not a function[/color]
> Yes, "text" was not a string, so it had no "replace" method.[/color]

Ok..

Mike

**Lasse Reichstein Nielsen** · Jul 20 '05, 01:03 PM

Re: Help needed with docwrite/regex tricks

"Mike Gifford" <mike@openconce pt.ca> writes:

[DOM node creation][color=blue]
> I think I understand what this is doing while looking at the code....[/color]

Yeah, it's not deep. It's just not as direct as writing HTML, which
can be both good and bad. It's definitly more verbose :)
[color=blue]
> I'd prefer to use your code (and give you credits inline). It's for a GPL
> project though and need to get your permission to do so. If you have no
> objections, great![/color]

No objections. Bear in mind that it took almost ten minutes to write, so
ofcourse there are no guarantees for anything :)

Good luck.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Mike Gifford** · Jul 20 '05, 01:04 PM

Re: Help needed with docwrite/regex tricks

Hello Lasse,

On Mon, 22 Dec 2003 23:15:41 +0100, Lasse Reichstein Nielsen wrote:[color=blue]
> "Mike Gifford" <mike@openconce pt.ca> writes: [DOM node creation][color=green]
>> I think I understand what this is doing while looking at the code....[/color]
> Yeah, it's not deep. It's just not as direct as writing HTML, which can
> be both good and bad. It's definitly more verbose :)[/color]

I've got enough experience with PHP, but there is just a different set of
assumptions with javascript that I haven't got my head around yet..
[color=blue][color=green]
>> I'd prefer to use your code (and give you credits inline). It's for a
>> GPL project though and need to get your permission to do so. If you
>> have no objections, great![/color]
> No objections. Bear in mind that it took almost ten minutes to write, so
> ofcourse there are no guarantees for anything :)[/color]

A much appreciated 10 minutes.. I'll credit the code with something like:
Code Contributed by Lasse Nielsen - http://www.infimum.dk

I might ask for a limited guarantee or documentation if I was paying you
for this code. As it is, thanks a lot and Merry Christmas!

Mike

Help needed with docwrite/regex tricks

Help needed with docwrite/regex tricks

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment