Can Javascript work with Multiple lines of Text.

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • jackson.rayne@gmail.com

    Can Javascript work with Multiple lines of Text.

    Hello,

    Another newbie question here.

    Let me explain my situation first. I have bought a 3rd party tool
    that runs a PHP script and gives me some HTML code which I can
    directly use in my pages.

    The code generated is normal HTML code, example

    <<<<<<<<<<<<Exa mple>>>>>>>>>>> >>>>>>>

    <table class= "myclass" border="1" width="160" cellspacing="0"
    cellpadding="0" >
    <tr>
    <td width="100%">
    <table border="0" width="160" cellspacing="0" cellpadding="1" ><tr>
    <td width="55" valign="top" align="center">

    <<<<<<<<<<<<Exa mple Ends>>>>>>>>>>> >>>

    Now all the above code is contained in a PHP variable. When I want to
    display the above code on my site, all I have to do is insert

    %%Variable_Name %%

    and it will embed the whole code on my webpage.

    Now here's what I want. I need to make some changes in the above HTML
    code using Javascript. In particular I want to search for some value
    and make replacements.

    Since the above code contains text spread across multiple lines, I
    don't know whether it would work with Javascript. All I want to do is
    put the above code (text) in a Javascript variable and make some
    changes. I tried but it is not working.

    I contacted the developer but he says that since his tool is being
    used by large number of people he can't make changes based on just one
    request.

    Any ideas on how to proceed ahead..

    Thanks in advance,
    Rayne
  • Gregor Kofler

    #2
    Re: Can Javascript work with Multiple lines of Text.

    jackson.rayne@g mail.com meinte:
    Since the above code contains text spread across multiple lines, I
    don't know whether it would work with Javascript. All I want to do is
    put the above code (text) in a Javascript variable and make some
    changes. I tried but it is not working.
    Tried what? What is "not working"? Show either your efforts, or make
    clear what you want to achieve.

    Gregor

    --
    http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
    http://web.gregorkofler.com ::: meine JS-Spielwiese
    http://www.image2d.com ::: Bildagentur für den alpinen Raum

    Comment

    • Jorge

      #3
      Re: Can Javascript work with Multiple lines of Text.

      On Sep 25, 6:50 pm, jackson.ra...@g mail.com wrote:
      >
      Since the above code contains text spread across multiple lines, I
      don't know whether it would work with Javascript. All I want to do is
      put the above code (text) in a Javascript variable and make some
      changes. I tried but it is not working.
      An idea:
      javascript:txt= document.docume ntElement.inner HTML;alert(txt) ;

      or two:
      javascript:txt= document.body.i nnerHTML;alert( txt);

      But I think you're heading in the wrong direction...
      --
      Jorge.

      Comment

      • Yanick

        #4
        Re: Can Javascript work with Multiple lines of Text.

        On Sep 25, 12:50 pm, jackson.ra...@g mail.com wrote:
        Hello,
        >
        Hello.
        >
        Let me explain my situation first. I have  bought a 3rd party tool
        that runs a PHP script and gives me some HTML code which I can
        directly use in my pages.
        >
        The code generated is normal HTML code, example
        >
        [snip]

        Ok. Understand what's first, first.

        1) HTML = HyperText Markup Language; PHP = PHP Hypertext Processor. So
        here we go:

        If you have the PHP extension installed unto a web server, it means
        that the server, as it reads the requested file from the client, that
        file will be caught by the PHP parser and execute any script it finds,
        replace the script portion of the file by whatever output it produces,
        and the server will send that portion instead of the PHP script. (This
        is the same thing with any other server-side scripting language. (I'm
        explaining briefly here.)

        For example, if your equest the file hello.php, and the file looks
        like this:

        <html>
        <head>
        </head>
        <body>
        <?php echo '<p id="hello">Hell o world!</p>'; ?>
        </body>
        </html>

        You will receive:

        <html>
        <head>
        </head>
        <body>
        <p id="hello">Hell o world!</p>
        </body>
        </html>

        Now, PHP doesn't understand the HTML part of you page. In fact, it
        doesn't know it at all. All it knows (in this example anyway) is that
        there's a string that contains '<p id="hello">Hell o world!</p>', and
        that it outputs it. Thus, PHP can replace portion of the strings it
        knows BEFORE it sends it to the client. But if you want to modify the
        HTML only from the client side, THEN you make use of Javascript. So,
        let's change the code a little:

        <html>
        <head>
        </head>
        <body>
        <?php echo '<p id="hello">Hell o world!</p>'; ?>
        <script type="text/javascript">
        var el = document.getEle mentById("hello ");
        el.innerHTML += "<br />Bye world!";
        </script>
        </body>
        </html>

        You will receive from the server this file:

        <html>
        <head>
        </head>
        <body>
        <p id="hello">Hell o world!</p>
        <script type="text/javascript">
        var el = document.getEle mentById("hello ");
        el.innerHTML += "<br />Bye world!";
        </script>
        </body>
        </html>

        NOTE : the <scripttag is still there! That's because it has not yet
        been executed! But first, the browser (IE/Firefox/etc.) has to parse
        that data too. This is because HTML is markup language, and the
        browser converts the markups into the DOM (Data Object Model); the DOM
        is organized in a tree-like structure in the memory of the browser.
        So, this is why everything is attached to the document object in
        javascript. (Because Javascript talks to the DOM, not the HTML.) In
        your example, the DOM would look like this:

        object:window
        ...DOMElement:b ody
        .....DOMElement :p{id:"hello"}
        .......textElem ent:Hello world!

        NOTE : this is a very simplified representation of the DOM tree, for
        explanation purposes.

        As you may have noticed, the <scripttag is not there. This is
        because, as PHP scripts are executed as they are encountered,
        Javascript is the same thing. The browser executes the scripts, and
        store whatever it tells it to store in memory. In our example, the
        browser now has to parse the <scripttag of the file it received,
        having the DOM tree above. When executed, the script makes a requests
        to the browser to find the element with an id of "hello". The Browser
        returns the <pelement with every nodes it contains (here, it's a
        text node "Hello world!"

        NOTE : if a script request an element that has not yet been added to
        the DOM, the browser will return 'undefined'. This is why you cannot
        directly access elements below the <scripttags.

        Then, the script tells the browser to add HTML content to this <p>
        element. The DOM now becomes :

        object:window
        ...DOMElement:b ody
        .....DOMElement :p{id:"hello"}
        .......textElem ent:Hello world!
        .......DOMEleme nt:br
        .......textElem ent:Bye world!

        Et voilà!

        NOTE : when you use innerHTML in your Javascript, the browser has to
        parse the data set to the element. If you can read the value, it's
        simply because the browser holds the string that it used to parse the
        data when it received the file from the server. It doesn't really use
        the data itself for processing beyond the parsing.

        In conclusion, the best way to replace data in your page is :

        1) the the parent element of your <tableand get it's innerHTML, then
        modify it. (Remember, every time you change innerHTML, the browser has
        to parse it, so I suggest you use a variable to do what you want, then
        reassign the value to the innerHTML.)

        2) directly get the elements you want with the DOM methods :
        document.getEle mentById(id) or document.getEle mentsByTagName( tag) (the
        last method returns an array regardless. Be advised!)

        3) modify the PHP strings before the script outputs them to the
        client.


        I hope this was clear enough, and helpful. :)

        yanick

        Comment

        Working...