views:

61

answers:

3

Hi,

I need to find the text of the last <a> tag in a page using javascript. I read the full HTML like this:

var str = document.body.innerHTML;

I now need to find a subpart of the str and inside that subpart i need to find the last <a> tag. There could be more than on <a> tag, but the exact count will be different.

Here is an example on how the HTML looks:


<td>

        <!-- BREADCRUMB--> 
        <table border="0" cellspacing="0"

            cellpadding="0"> 
            <tr> 
                <td style="width: 20px; padding-left: 15px;" valign="middle"> 
                    &nbsp;<a href="Default.aspx"><img src="images/home_button.gif" alt="home" border="0"

                        style="width: 15px; height: 14px;" /></a> 
                </td> 
                <td style="width: 550px; padding-left: 5px;" valign="middle"> 
                    <span class="Text"> 
                        <a href='Default.aspx'>Home</a> >
      <a href='CategoryMain.aspx?query=CZJ/7jr0Rq0mC78s0LikwNmBEwgNRtoEjG4cb6zHk46uJItFusMclq0wZCh1wGS2'>Parfume</a> >
      <a href='BrandsListing.aspx?query=CZJ/7jr0Rq0mC78s0LikwNmBEwgNRtoEjG4cb6zHk465BKkuLpVAwR0SP9v7KIHwSjHLYHxaEB1gp/DR0tT5hvBc/P/seC3NkvMSTAlIgeUoaEPLcBX/wyfqnK0dfYmkN3fGbFp/dIbBYKGQVRlF5lVNzw+DcOjSPuiVeiUTFuozCRO/xUJ9sumgm5fB1uwbQpUawHk1xUBVlq0lQmvGSznPA02SJH+t0d/2mm8UtUt6iBbH9wUOStWj5oKWMY+KCLyF1lhnL/mV2toi247YyA=='>Herredufte</a> > 
      <a href='ProductListing.aspx?query=AVqR4KVNq4jY0bZVFKEeYKGDosMoiEFZG6z2wWUHFnQPAkt8EaweP3EFy8mMm11vE+rSYj+OdLzbb41Vse4QE0vSjf36vrcSEJee9K1y/5ZMjd4Oni1tZUNBe6bZdssnYEXf0PGT9nU8HBFX+2mmgxbmijm9NESLPiWtnTY9rLpZGix4zQdXfnt1S1oY+sHQBDg1jXnhUTEsKoo0fZBwQqkUQgmDX5cUB5UCMzGTP6NRTufhqTRy5uhMeNqXzufAoP2NsI5va/HwWHRT3MeQ8U/0oQM3y5KiP3LJuTx2kwXo4v3qemaK3B+M6k1nSRqvUfvTnEcbGyrYEjiaTV0kEixbDojt3V2aNbXBRxax1yXQd9QIrVmryeymxX2Ga7f88KaC70fIahkjdQ2z3E+PkwpZ6iI5hp9Oj5jCm/5ffWGqUzJqF9mnTiSShg7VPRdx'>Bvlgari</a> > 
      Eau de Toilette Spray
                    </span> 
                </td> 
                <!-- Changed Section: The style will should be this !--> 
                <!-- <td class="Text"><a href="wishlist.html">Your Wish List</a> &nbsp;</td> --> 
                <td class="Text" style="padding-right: 10px; width: 92px; text-align: right;" valign="middle"> 


                   <a href="SiteContent.aspx?siteContentName=Price Guarantee"> 
                            <span id="ctl00_Label1">Prisgaranti</span> 
                       </a> 
                </td> 
                <td class="Text" style="padding-right: 0px; width: 50px; text-align: left;" valign="middle"> 
                    <a href="Wishlist.aspx"> 
                        <span id="ctl00_Label2" title="Ønskeliste">Ønskeliste</span></a> 
                </td> 
                <td class="Text" style="padding-right: 0px; width: 45px; text-align: left;" valign="middle"> 
                    <a href="MemberLogin.aspx"> 
                        <span id="ctl00_lblLogin" title="Login">Login</span></a> <a href="Logout.aspx"> 
                                </a></td> 
                <!--<td class="Text"><a href="becomeamember.html">Become a Member</a> &nbsp;</td>  --> 
                <td align="right" style="width: 30px; padding-right: 9px;" valign="middle"> 
                    <input type="image" name="ctl00$ImageButton1" id="ctl00_ImageButton1" src="images/flag_uk.gif" alt="Switch language" onclick="setLangCookie();" style="height:12px;width:21px;border-width:0px;" /> 
                </td> 
            </tr> 
        </table> 
        <!-- /BREADCRUMB --> 
    </td> 
</tr> 
</table>

What i need is to get the text of the last <a> tag that are inside the <span class="Text"> inside <!-- BREADCRUMB --> comments. In this case its the text "Bvlgari"

It would be nice if i could get an array of all the <a> tag text in this case:

"Home", "Parfume", "Herredufte", "Bvlgari"

In PHP you can do this, by using () in the pattern, and then refer back to them, but i cant seem to get it to work in JS. Im new to using reg.exp. in Javascript.

Hope it make sense.

BR/Sune

+1  A: 

get jQuery or Prototype.js in prototype you'd write something like

$$("tr td .Text a").map(function(el) { return el.innerText });

which would return what you want.

ormuriauga
I do not have the option on using jQuery or Prototype.
sunebrodersen
+1  A: 

I think that you should rather read the information from the elements than to get the entire HTML code of the page.

Using jQuery you can easily get the information:

var texts = $('span.Text a').map(function(){ return this.html(); }).get();

Using plain Javascript it is a bit harder to traverse elements that doesn't have identities. If you can add id="Text" to your span, it gets easier:

var links = document.getElementById('Text').getElementsByTagName('a');
var texts = [];
for (var i = 0; i <  links.length; i++) texts.push(links[i].innerHTML);
Guffa
Thanks for the answer - but ,again, i dont have the option of using jQuery, so i need to do it in plain js.
sunebrodersen
I dont have the option to give it an ID.
sunebrodersen
But im thinking - if i could search for a span tag with class=Text and then within this tag get all a tags. But im not sure how to get this. I can get the span tag with class=Text fine and store the innerHTML in a var, but how to get from there im not sureMy code: for(var i = 0, n = spanArray.length; i < n; ++i) { if(spanArray[i].getAttribute("class") == 'Text') { //Do some stuff here} }
sunebrodersen
maybe i could set the ID here and then traverse using your code?
sunebrodersen
that seemed to work
sunebrodersen
@sunebrodersen: Once you have the span element you don't need the id. Just call the getElementsByTagName on it to get the links inside it: `var links = spanArray[i].getElementsByTagName('a');`.
Guffa
+1  A: 

Hi,

Thanks for all the answers! Escpecially Seth and Guffa got me back on the right track :)

Here is my solution:

    for(var i = 0, n = spanArray.length; i < n; ++i) {
        if(spanArray[i].getAttribute("class") == 'Text') {
            spanArray[i].id = 'mltracking_breadcrumbs';
            var links = document.getElementById('mltracking_breadcrumbs').getElementsByTagName('a');
            var texts = [];
            for (var j = 0; j <  links.length; j++) {
                texts.push(links[j].innerHTML);
            } 
            alert(links.length);
        }
    }

I know its sensitive about more than one spantag with the classname Text, so please let me know if there are a better option. I dont have ID on the span tag, and dont have the option to get it.

sunebrodersen