...

View Full Version : Accessing The Text Of An Element



Antoniohawk
08-18-2004, 12:00 AM
How can I access the text of the following element, run some regexp and then change the contents to the new text?



<pre id="tab">
[---------------]
[---------------]
[--5-5--5-5--7--]
[--x-x--x-x--x--]
[--3-3--7-7--9--]
[---------------]
</pre>

sad69
08-18-2004, 12:10 AM
Well all that text within the PRE tags is one TextNode. So if you grab the PRE element, the TextNode is its firstChild. Then to grab the value of the TextNode you access its nodeValue:


var preTextNode = document.getElementById('tab').firstChild;
var preTextValue = preTextNode.nodeValue;


Now you can make the necessary changes using your regex and whatever and store it in preTextNode.nodeValue:


preTextNode.nodeValue = regexedTextValue;


That should do it. Let me know if you run into any troubles.

Sadiq.

Antoniohawk
08-18-2004, 09:48 PM
Thanks Sadiq, that's exactly what I was looking for. It turns out that my javascript skills are greatly lacking, as are my regexp skills. Why won't the following work?


<script type="text/javascript">
function stylize() {
var tabHolder = document.getElementById('tabHolder');
var tabText = tabHolder.firstChild.nodeValue;
alert(tabText);
tabText = tabText.replace('[' , '<span class=\"bracket\">[<\/span>');
}
</script>
...
pre.bracket {
color: red;
}
...
<pre id="tabHolder">
[---------------]
[---------------]
[--5-5--5-5--7--]
[--x-x--x-x--x--]
[--3-3--7-7--9--]
[---------------]
</pre>
<a href="#" onclick="stylize(); return false;">Stylize It!</a>

sad69
08-18-2004, 10:15 PM
It was just your function that I changed:


<script type="text/javascript">
function stylize() {
var tabHolder = document.getElementById('tabHolder');
var tabText = tabHolder.firstChild.nodeValue;
alert(tabText);
var regex_bracket = new RegExp("\\[", "g");
tabText = tabText.replace(regex_bracket, '<span class=\"bracket\">[<\/span>');
tabHolder.firstChild.nodeValue = tabText;
}
</script>


Hope that helps,
Sadiq.

Antoniohawk
08-18-2004, 11:10 PM
That works in replacing the text, but but it is just printed out on the page and not put to use by coloring the brackets red. Could you explain this line to me?

var regex_bracket = new RegExp('\\[', 'g');
Also, why does javascript make me use:

tabHolder.firstChild.nodeValue = tabText;
when tabText already references the nodeValue?

sad69
08-19-2004, 12:30 AM
Well the reason it just prints it out to the screen is because it's within PRE tags..



var regex_bracket = new RegExp('\\[', 'g');

This creates a Regular expression object. Equivalent of:
/\\[/g

I'm not entirely sure why, but you need 2 backslashes to escape a bracket.

Also, tabText doesn't reference nodeValue, it holds a copy of what nodeValue points to (just a string..).

You could have done this:


var tab = tabHolder.firstChild;
var tabText = tab.nodeValue;
tabText = 'lala';
tab.nodeValue = tabText;


Hope that answers your questions.
Sadiq.

Antoniohawk
08-19-2004, 12:53 AM
Those 2 backslashes are what threw me. That g stands for 'global' doesn't it, meaning multi-line? I used the following code and it worked, so I'm curious why it worked at all and how to accomplish that through javascript.

<pre>
<span class="bracket">[</span>---------------]
[---------------]
[--5-5--5-5--7--]
[--x-x--x-x--x--]
[--3-3--7-7--9--]
[---------------]
</pre>


[---------------]
[---------------]
[--5-5--5-5--7--]
[--x-x--x-x--x--]
[--3-3--7-7--9--]
[---------------]

sad69
08-19-2004, 11:21 PM
I think I have any idea of what the issue is, but I can't seem to come up with a proper solution. However, this is what I came up with:


<script type="text/javascript">
function stylize() {
var tabHolder = document.getElementById('tabHolder');
var tabText = tabHolder.innerHTML;
alert(tabText);
var regex_bracket = new RegExp("\\[", "g");
tabText = tabText.replace(regex_bracket, '<span class=\"bracket\">[<\/span>');
tabHolder.innerHTML = tabText;
}
</script>


Maybe someone else can lend a hand here....

Sadiq.

Eskimo
08-20-2004, 04:23 PM
Only issue I see isn't with the javascript, its in the stylesheet.

pre.bracket won't hit <span id="bracket">, but #bracket will :thumbsup:

Antoniohawk
08-20-2004, 11:08 PM
But it's declared as a class inline too Eskimo. :)


<span class="bracket">


By the way, Sadiq, that code works wonderfully. Thanks man. :thumbsup:



A little regexp question now. I want to check for 'x' or 'X' and wrap them with a span tag. The only problem is that I don't know how to make it so that the script differentiates between 'x' being replaced by <span>x</span> and 'X' being replaced by <span>X</span>.

Eskimo
08-20-2004, 11:20 PM
My head must be broken. sorry for the mixup! :confused:

sad69
08-21-2004, 09:10 AM
At first glance I thought you meant how to do a case insensitive search for x.. but then I realized your dilemma. I think you ensure you don't include the i for case insensitive, and do it twice, one for each case:


regex_x = new RegExp("x", "g");
tabText = tabText.replace(regex_x, '<span class=\"class\">x<\/span>');

regex_X = new RegExp("X", "g");
tabText = tabText.replace(regex_X, '<span class=\"class\">X<\/span>');


That's how I'd do it anyway..
Sadiq.

Antoniohawk
08-22-2004, 06:19 PM
That's what I was thinking. The only problem is that I'm gonna have to do that for every number between 0 and 21.

dumpfi
08-22-2004, 06:45 PM
Might this help?

var regexp;
for(var i = 21; i > -1; i--) {
regexp = new RegExp(i, 'g');
tabText = tabText.replace(regexp, '<span class="class">' + i + '</span>');
}
dumpfi

Antoniohawk
08-22-2004, 10:05 PM
Awesome! Thanks dumpfi. :)

trib4lmaniac
08-25-2004, 01:52 PM
I'm not entirely sure why, but you need 2 backslashes to escape a bracket.
It's a minor point, but you need two backslashes because I imagine regular expressions are handled outside of javascript. So a single backslash would tell javascript that the following [ had a special meaning. \\ would tell it to feed in a single \ into the regex engine.

sad69
08-25-2004, 05:25 PM
Hey that's great! I was wondering what that meant, but never bothered to read up on it.

Thanks trib4lmaniac! :thumbsup:
Sadiq.

liorean
08-25-2004, 05:54 PM
I'm not entirely sure why, but you need 2 backslashes to escape a bracket.No you don't. If you use the literal notation instead of the constructor you'll find you need only a single backslash: /\[/. However, you are using the constructor, and the constructor takes the pattern as string argument. Since the backslash is the escaping character and not the literal character - which is what you want - you need to escape it by preceeding it with a backslash. This is one reason why you should use literals instead of constructors - it's simpler. Faster, too, though I don't think you'll see the speed difference when run on modern computers.

sad69
08-25-2004, 06:28 PM
Makes good sense. I'll remember that.

I've gotten into the habit of using the constructor, because when I started with regex, I needed to include a variable in my expression. The only way I could figure out how to include it, was to use the constructor or eval(). So I opted for the constructor!

Thanks for the explanation liorean.
Sadiq.

Antoniohawk
08-25-2004, 09:39 PM
I still don't really understand the double backslash issue, but javascript isn't my area and I think that I will just change it to literal notation for the sake of simplicity. :)

liorean
08-25-2004, 10:02 PM
Then I'll try to explain it more clearly. You see, a regular expression contains two parts, the pattern and the flags. Inside the pattern you have literal and special characters, and you use the backslash to escape literal characters to special and the other way around, right?

Well, now consider the two forms:


literal: '/' pattern '/' flags
constructor: 'new RegExp(' sPattern ',' flags ')'

Here, note the pattern and the sPattern. sPattern is the string that once evaluated generates the pattern. So, say you want to match the string \. Since the backslash is a special character and you want to match the literal character, you need to escape it in the pattern. So, that means that you get a pattern looking like \\. Now that means the literal is finished as soon as you add the flags. However, if you use the constructor you need to create the sPattern string that generates the pattern. In strings, backslashes are special characters too, so you need to escape them with a backslash. This means that to match the string \ you need a pattern looking like \\, and to get that pattern into the constructor, you need to send it a sPattern looking like \\\\.


This in turn means that using constructors instead of literals when the match string or the regular expression pattern contains backslashes automatically makes the code less obvious and harder to understand and debug.

Antoniohawk
08-25-2004, 10:08 PM
I understand now, thanks Liorean! Why didn't they just make it so that you could use the literal form in the constructor?

liorean
08-25-2004, 10:55 PM
Because then they would not be able to use regular strings for it, but would need a string-like input that has no escaping mechanism. And this couldn't be done easily with retained backward/forward compatibility without overloading yet another trigger character.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum