By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,630 Members | 1,252 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,630 IT Pros & Developers. It's quick & easy.

Help needed with docwrite/regex tricks

P: n/a
Hello,

I've got a number of html fragments (in a template file) which are bundled
together in a cms.

I'm sure that there's a way through javascript to convert a piece of code
like this:

<!-- START BE_sectionNew-htmlarea2.tpl -->

to a clickable link like:

<a href="admin/editTemplate.php?file=BE_sectionNew-htmlarea2.tpl"><img
src="/image/template.png"></a>

I'm just not a javascript guy and am not sure how to apply a regular
expression and rewrite the page output in javascript.

Any suggestions?

My ultimate goal is to put some way to easily mark and/or edit the
beginning/end of each of the template files which is used to make up a
page to make it easier for folks to edit it.

Mike
Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
"Mike Gifford" <mi**@openconcept.ca> writes:
I'm sure that there's a way through javascript to convert a piece of code
like this:

<!-- START BE_sectionNew-htmlarea2.tpl -->

to a clickable link like:

<a href="admin/editTemplate.php?file=BE_sectionNew-htmlarea2.tpl"><img
src="/image/template.png"></a>

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.replace(
/<[!]-- START ([^\s]*) -->/g ,
"<a href=\"admin/editTemplate.php?file=$1\"><img "+
"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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

P: n/a
Hello Lasse,

On Mon, 22 Dec 2003 14:02:20 +0100, Lasse Reichstein Nielsen wrote:
"Mike Gifford" <mi**@openconcept.ca> writes:
I'm sure that there's a way through javascript to convert a piece of
code like this:

<!-- START BE_sectionNew-htmlarea2.tpl -->

to a clickable link like:

<a href="admin/editTemplate.php?file=BE_sectionNew-htmlarea2.tpl"><img
src="/image/template.png"></a>
That depends on whether you want to do it in a live page or just in a
piece of text.


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>.
If you have it as text, you can do:

someText.replace(
/<[!]-- START ([^\s]*) -->/g ,
"<a href=\"admin/editTemplate.php?file=$1\"><img "+
"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.
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
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.


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

My current test page is:
<html>
<head>
<title>Replace</title>

<script language="JavaScript">
<!--

// Lasse's Example:
// someText.replace(
// /<[!]-- START ([^\s]*) -->/g ,
// "<a href=\"admin/editTemplate.php?file=$1\"><img "+ //
"src=\"/image/template.png\"><\/a>");

function replaceTextFunction() {
var text = document.getElementById("BE_ALL");
document.getElementById("BE_ALL").innerHTML =
text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
href=\"admin/editTemplate.php?file=$1\">Edit Template<\/a>");
}
}
-->
</script>

</head>

<body ID="BE_ALL">

<form>
<input name="form1" value="replaceText" type="submit"
ONCLICK="replaceTextFunction()"/> <br> <textarea name="textarea1" rows="2"
cols="50"> <!-- START BE_articlenew-htmlarea2.tpl --> <!-- START
BE_sectionNew.tpl --> </textarea>
</form>
<!-- START BE_articlenew-htmlarea2.tpl --> <!-- START BE_sectionNew.tpl
-->

</body>
</html>
The javascript console error that pops up is:

Error: text.replace is not a function Source File:
http://localhost/replace.html?form1=...area1=%3C%21--
+START+BE_articlenew-htmlarea2.tpl+--%3E%0D%0A%3C%21--+START+BE_sectionNew.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
Jul 20 '05 #3

P: n/a
"Mike Gifford" <mi**@openconcept.ca> wrote in message
news:pa****************************@openconcept.ca ...
<snip>
function replaceTextFunction() {
var text = document.getElementById("BE_ALL");
Here you assign a reference to a DOM element to the - text - variable,
not a string.
document.getElementById("BE_ALL").innerHTML =
text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
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.
href=\"admin/editTemplate.php?file=$1\">Edit Template<\/a>");

<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.
Jul 20 '05 #4

P: n/a
"Mike Gifford" <mi**@openconcept.ca> writes:
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
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.
Ok.. So how would I access the document tree?


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/commentConverter.html>
You also need to know how to build new DOM nodes using
document.createElement.

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.
function replaceTextFunction() {
var text = document.getElementById("BE_ALL");
If you chose to use innerHTML, this line should be:
var text = document.body.innerHTML;
Then "text" actually contains text (no need for getElementById, the
body element is directly accessible in modern browsers).
document.getElementById("BE_ALL").innerHTML =
text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
href=\"admin/editTemplate.php?file=$1\">Edit Template<\/a>");
I assume the linebreak was inserted by your news client. There shouldn't
be linebreaks inside Javascript strings.

Error: text.replace is not a function


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

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #5

P: n/a
Hi Richard,

This was what I finally needed to make the script work.
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)


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>Replace</title>
</head>

<body ID="BE_ALL">

<script language="JavaScript">
<!--

// Thanks for help from comp.lang.javascript users function
replaceTextFunction() {
if (document.getElementById) {
var text = document.getElementById("BE_ALL").innerHTML;
document.getElementById("BE_ALL").innerHTML =
text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
href=\"admin/editTemplate.php?file=$1\">Edit Template<\/a>");
}
}
}
-->
</script>

<form>
<input name="form1" value="replaceText" type="submit"
ONCLICK="replaceTextFunction()"/> </form>

</body>
</html>
Jul 20 '05 #6

P: n/a
Hello Lasse,

On Mon, 22 Dec 2003 20:53:48 +0100, Lasse Reichstein Nielsen wrote:
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. Ok.. So how would I access the document tree?

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/commentConverter.html>


Your script does seem to work better on the files I'm trying to work with.
You also need to know how to build new DOM nodes using
document.createElement.
I think I understand what this is doing while looking at the code....
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.


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!
function replaceTextFunction() {
var text = document.getElementById("BE_ALL");


If you chose to use innerHTML, this line should be:
var text = document.body.innerHTML;
Then "text" actually contains text (no need for getElementById, the
body element is directly accessible in modern browsers).
document.getElementById("BE_ALL").innerHTML =
text.replace(/<[!]-- START ([^\s]*) -->/g , "<a
href=\"admin/editTemplate.php?file=$1\">Edit Template<\/a>");


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


I added that for the message.
Error: text.replace is not a function

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


Ok..

Mike
Jul 20 '05 #7

P: n/a
"Mike Gifford" <mi**@openconcept.ca> writes:

[DOM node creation]
I think I understand what this is doing while looking at the code....
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 :)
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!


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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #8

P: n/a
Hello Lasse,

On Mon, 22 Dec 2003 23:15:41 +0100, Lasse Reichstein Nielsen wrote:
"Mike Gifford" <mi**@openconcept.ca> writes: [DOM node creation]
I think I understand what this is doing while looking at the code....

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 :)


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..
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!

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


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
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.