javascript parse text from <a href> links

Question

Lets say I have

<a href="/example1">ThisTextChanges</a> 
<a href="/example2">ThisTextChanges</a> 
<a href="/example3">ThisTextChanges</a> 
<a href="/example4">ThisTextChanges</a> 

I want to iterate through these and get the "ThisTextChanges" which are some numbers that changes, most accurately timers.

How can i achieve that? jquery is fine. They are inside a div with id "main_container". I need to put the text in a var so the href is importanto to know which var i use for each one.

Answer 1

You can just add condition in the a selector as follows:

var array = []; 
$('#main_container a[href="/example2"]').each(function(){ 
    array.push($(this).html()); 
}); 
console.log(array); 

Answer 2

You can iterate and store them in an Array

var arr = []; 

$("a").each(function(){ 

    arr.push($(this).text()); 
    console.log(arr); 

}); 

Answer 3

you can achieve that in may ways. this example using for loop.

var main_container = document.getElementById("main_container"); 
var items = main_container.getElementsByTagName("a"); 
for (var i = 0; i < items.length; ++i) { 
     // do something..... 
} 

Answer 4

Lets break the task down into several steps:

• Get a handle to all of our links (document.querySelectorAll)

• learn how to get the current text of an a tag (childNode[0].nodeValue)

• put it all together (Array.from, Array.map)

Get a handle to all of our links:

we will use document.querySelectorAll to get list of all nodes that match our selector. here I'm just going to use the selector a, but you probably have a class that specifies these links vs other links on the page:

var links = document.querySelectorAll('a'); 

Get the text of a link

This one is a bit more complicated. There are several ways to do this, but one of the more efficient ways is to loop through the child nodes (which will mostly be text nodes), and append the node.nodeValue for each one. We could probably get away with just using the nodeValue of the first child, but instead we'll build a function to loop through and append each.

function getText(link){ 
    var text = ""; 
    for (var i = 0; i < link.childNodes.length; i++){ 
     var n = link.childNodes[i]; 
     if (n && n.nodeValue){ 
      text += n.nodeValue; 
     } 
    } 
    return text; 
} 

Put it all together

To put it all together we will use Array.map to turn each link in our list into the text inside it. This will leave us with an array of strings. However in order to be able to pass it to Array.map we will have to have an array, and document.querySelectorAll returns a NodeList instead. So to convert it over we will use Array.from to turn our NodeList into an array.

function getText(link){ 
 
    var text = ""; 
 
    for (var i = 0; i < link.childNodes.length; i++){ 
 
     var n = link.childNodes[i]; 
 
     if (n && n.nodeValue){ 
 
      text += n.nodeValue; 
 
     } 
 
    } 
 
    return text; 
 
} 
 

 
var linkTexts = Array.from(document.querySelectorAll('a')) 
 
       .map(getText); 
 

 
console.log(linkTexts);

<a href="1">this is text</a> 
 
<a href="2">this is some more text</a>

Answer 5

var array = []; 
 
$('#main_container a').each(function(){ 
 
    array.push($(this).html()); 
 
}); 
 
console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main_container"> 
 
     <a href="/example1">ThisTextChanges 1</a> 
 
     <a href="/example2">ThisTextChanges 2</a> 
 
     <a href="/example3">ThisTextChanges 3</a> 
 
     <a href="/example4">ThisTextChanges 4</a> 
 
    </div>

Answer 6

Please try:

$('#main_container > a[href]').each(function() { 
    var tes = $(this).attr('href').substring(1); 
    window[tes] = $(this).text(); 
}); 

<a href="/example1">123</a> will produce var named example1 with value 123, and so on.