Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Accessing The Text Of An Element

    How can I access the text of the following element, run some regexp and then change the contents to the new text?

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

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
     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:
    Code:
     preTextNode.nodeValue = regexedTextValue;
    That should do it. Let me know if you run into any troubles.

    Sadiq.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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?

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

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It was just your function that I changed:
    Code:
    <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.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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?
    Code:
    var regex_bracket = new RegExp('\\[', 'g');
    Also, why does javascript make me use:
    Code:
    tabHolder.firstChild.nodeValue = tabText;
    when tabText already references the nodeValue?

  • #6
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well the reason it just prints it out to the screen is because it's within PRE tags..

    Code:
    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:
    Code:
    var tab = tabHolder.firstChild;
    var tabText = tab.nodeValue;
    tabText = 'lala';
    tab.nodeValue = tabText;
    Hope that answers your questions.
    Sadiq.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Code:
    <pre>
    <span class="bracket">[</span>---------------]
    [---------------]
    [--5-5--5-5--7--]
    [--x-x--x-x--x--]
    [--3-3--7-7--9--]
    [---------------]
    </pre>
    Code:
    [---------------]
    [---------------]
    [--5-5--5-5--7--]
    [--x-x--x-x--x--]
    [--3-3--7-7--9--]
    [---------------]

  • #8
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Stillwater Ok
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Only issue I see isn't with the javascript, its in the stylesheet.

    pre.bracket won't hit <span id="bracket">, but #bracket will
    Last edited by Eskimo; 08-20-2004 at 05:25 PM.
    "Never offend people with style when you can offend them with substance."
    --Sam Brown

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    But it's declared as a class inline too Eskimo.

    Code:
    <span class="bracket">
    Edit:
    By the way, Sadiq, that code works wonderfully. Thanks man.


    [edit num=2]
    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>.
    [/edit]
    Last edited by Antoniohawk; 08-21-2004 at 12:23 AM.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Stillwater Ok
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My head must be broken. sorry for the mixup!
    "Never offend people with style when you can offend them with substance."
    --Sam Brown

  • #12
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #14
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Might this help?
    Code:
    var regexp;
    for(var i = 21; i > -1; i--) {
      regexp = new RegExp(i, 'g');
      tabText = tabText.replace(regexp, '<span class="class">' + i + '</span>');
    }
    dumpfi

  • #15
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Awesome! Thanks dumpfi.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •