Extracting anchor href text value from an array of tags in Javascript

Question

The goal is for a function to append or truncate specific anchor href "text values"

Array of Tag objects and Class name is passed along with the string to append or truncate to the href "text value"

        <table>
            <tr>
                <td class="columnOne">
                    <span class="processTitle"> 
                        <a href="sample_US.html">Sample (US version)</a> 
                    </span> 
                    <span class="updateIndicator">12/28/2014</span> 
                </td>
                <td>
                    <div class="loc_us">
                        <span class="templateName">Request Form</span>
                        <span class="templateLinks"> 
                            <a target="_blank" href="Templates_Form.xls" class="linkTemplate"></a> 
                        </span>
                        <span class="processTitle"> 
                            <a href="sample2_US.html">Sample2 (US version)</a> 
                        </span> 
                    </div>
                </td>
            </tr>
        </table>

Example where an initialize function calls to an append/truncate the URL:

function initProjectType() {
    theSpanTags_ar = document.getElementsByTagName("SPAN")
    appendURLs(theSpanTags_ar,"processTitle","?loc=US");
}
function appendURLs(whichTag_ar, whatClassName, theAppendString, URLremoveString) {
for(i=0; i<whichTag_ar.length; i++) {                                   // loop thru the tags   
    if (whichTag_ar[i].className === whatClassName){                    // match tag to class
        var theLinkTags_ar = whichTag_ar[i].getElementsByTagName("A")   // extract the Anchor into an array
        for(j=0; j<theLinkTags_ar.length; j++) {                        // loop thru the number of Anchors          
            theLink = theLinkTags_ar[j].nodeValue.href;                 // extract the href "text value" <<<---help?    
            if (URLremoveString) {                                      // if truncate the href value
                if (theLink.indexOf(URLremoveString) != -1) {
                    theLink = theLink.substr(URLremoveString.length)
                    theLinkTags_ar[j].href = theAppendString + theLink;
                }
            } else {                                                    // else append the href value
                theLinkTags_ar[j].href = theLink + theAppendString;
            }
        }
    }
}
}

I've tried all kinds of variations to extract the text string value without success, yet given that the objects are being passed in an array, simpler methods like GetElementByID.GetByTagName do not appear to work. Also trying to stick with Javascript only.

I am probably missing a fundamental point here, and thank you in advance with helping my ongoing learning!

bleepzter · Accepted Answer · 2015-01-14 20:37:41Z

1

in Javascript there are two methods defined in the object:

getAttribute(attributeName) and setAttribute(attributName, value).

So for your troubles once you have the reference to your link, you may want to use the following:

for(j=0; j<theLinkTags_ar.length; j++)
{
  var link = theLinkTags_ar[j]; //easy access to the link without indexer.

  var linkHref = link.getAttribute('href'); //get the href.

  if (URLremoveString != null )
  {
     if(linkHref.indexOf(URLremoveString) != -1){
        linkHref = linkHref.substr(URLremoveString.length)
        linkHref = theAppendString + linkHref;
     }
  }
  else
  {
     linkHref = linkHref + theAppendString;
  } 

  link.setAttribute('href', linkHref);
}

edited Jan 14, 2015 at 20:37

answered Jan 13, 2015 at 1:37

bleepzter

10.1k12 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oliver2 Over a year ago

It makes sense! It all works up to the point of the setProperty, where it flags link.setProperty as not a function. I'm using both FF and IE11 for testing.

bleepzter Over a year ago

sorry, that's supposed to be setAttribute('href', linkHref);

RobG · Accepted Answer · 2015-01-13 02:29:42Z

0

To get the value of the href, read the href property directly on the link:

theLink = theLinkTags_ar[j].href;

To make selecting the required element easier, consider:

var nodes = document.querySelectorAll('span.processTitle");

and if you want the A elements inside that:

var nodes = document.querySelectorAll('span.processTitle > a');

Not sure about support for complex selectors in IE 8 so you might want to keep the looping method for now.

answered Jan 13, 2015 at 2:29

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

oliver2 · Accepted Answer · 2015-01-13 21:21:27Z

bleepzter's answer above using .getAttribute('href') to return the href text value worked perfectly.

Note that in lieu of using the link.setProperty('href', linkHref) it would not work, but changing over to link.setAttribute('href', linkHref) solved that problem.

Final snippet:

for(j=0; j<theLinkTags_ar.length; j++)
{
  var link = theLinkTags_ar[j]; //easy access to the link without indexer.

  var linkHref = link.getAttribute('href'); //get the href.

  if (URLremoveString != null )
  {
     if(linkHref.indexOf(URLremoveString) != -1){
        linkHref = linkHref.substr(URLremoveString.length)
        linkHref = theAppendString + linkHref;
     }
  }
  else
  {
     linkHref = linkHref + theAppendString;
  } 

  link.setAttribute('href', linkHref);
}

Thank you!

Collectives™ on Stack Overflow

Extracting anchor href text value from an array of tags in Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related