473,320 Members | 1,951 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Help needed with docwrite/regex tricks

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
8 1893
"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
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
"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
"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
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
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
"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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: worzel | last post by:
Hi All, I am looking for a reg ex that will match email addresses withing <a href=mailto blah > links. Actually, I already crafted my own, but with a slight problem: <a...
4
by: H | last post by:
This is kind of an followup on oneof my previous questions, and it has with RegEx to do. I have a string containing of several words. What would a good regex expression looklike to get one match...
4
by: JS | last post by:
I am writing a C# app that needs to parse a sentence entered by the user for a simple boolean search. I need to capture all of the AND words that are not inside of double quotes. However, I am...
4
by: henrik | last post by:
Hi I have a regex question. I want to find all content of a <td class="someclass"> tag. This means the expression should include all other tags included between <td class="someclass"> and </td>....
2
by: Vai2000 | last post by:
Can someone help me with expression needed to extract the entire string FOO*1*DATA*DATA*ID~ 1. This string pattern is embedded in a super long string.. TIA This is my unsuccessful attempt...
5
by: TheSteph | last post by:
Hi, I'm new to Regex.. Could someone show me how I can extract substring enclosed in ? Example :
3
by: MCH | last post by:
hi there, I am working with a HTML-like text with boost:regex. For example, the following pattern might occur in my text <abc efg> <p>EFG</p 12<3> In this case, I would like to extract...
6
by: PaulM | last post by:
...all but the first x chars in a string of arbitrary length? Apologies if this is the wrong forum; I wasn't sure the best place to post about Regex. Background: I am new to Regex for pattern...
4
by: =?Utf-8?B?bWFnZ2ll?= | last post by:
hi, I need some help with a reg. expression. I have a comma delimited file with quotes. Not every field has quotes, only some. This is a sample of my file:...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.