Get text between several tags

Question

I have this html code on page:

<div style="display:none" id="roles">
        <span>Manager</span>
        <span>Seller</span>
</div>

And i jas want to get array of string between spans element.

var roles = document.getElementById("roles").innerText.match("what i should get here"); // output roles = ["Manager", "Seller"]

Answer 1

 var roles = Array.prototype.slice.call(document.getElementById('roles').getElementsByTagName('span')).map(function(node) { return node.innerText || node.textContent; }); console.log(roles); 

 <div style="display:none" id="roles"> <span>Manager</span> <span>Seller</span> </div> 

Answer 2

You need to iterate span elements and get its text.

 //Get the span elements var spans = document.querySelectorAll("#roles span"); var roles = []; //Iterate the elements for (var i = 0; i < spans.length; i++) { //fetch textContent and push it to array roles.push(spans[i].textContent); } console.log(roles) 

 <div style="display:none" id="roles"> <span>Manager</span> <span>Seller</span> </div> 

You can also use as suggested by @Tushar

 //Get the span elements var spans = document.querySelectorAll("#roles span"); var roles = Array.from(spans).map(s => s.textContent); console.log(roles) 

 <div style="display:none" id="roles"> <span>Manager</span> <span>Seller</span> </div> 

Answer 3

Get all span elements using querySelectorAll then convert it to array with help of Array.from method(older browser use [].slice.call ) and now generate the result array using Array#map method.

 // for older browser use `[].slice.call(...` instead of `Array.from(...` var res = Array.from(document.querySelectorAll('#roles span')).map(function(e) { return e.textContent; }); console.log(res); 

 <div style="display:none" id="roles"> <span>Manager</span> <span>Seller</span> </div> 

Answer 4

<div id="exmpl1">   
<span id="1st"> A1</span>
<span id="2nd"> A2</span>
<span id="3rd"> B1</span>
<span id="4th"> B2</span>
<span id="5th"> C1</span>
</div>

var spans = document.getElementById('exmpl1').getElementsByTagName('span'),
obj = {};

for (var i = 0, j = spans.length; i < j; i++) {
    obj[spans[i].id] = spans[i].textContent || spans[i].innerText;
}

console.log(obj);

Answer 5

I would recommend first finding the descendents of the roles div and then iterating through them in a for loop to post the results to an array.

    //Define the parent div
    var parent = document.getElementById('roles');

    //Find the children of the parent div
    var children = parent.getElementsByTagName('span');

    //Count how many children there are within the parent div
    var totalChildren = children.length;

    //Declare a new array to store the roles in
    var rolesArray = [];

    //And let the for loop push each role into the array
     for (var i = 0; i < totalChildren; i++) {
        rolesArray.push(children[i].innerText);
     }

Answer 6

Here is another solution :

var spans;  
document.querySelectorAll('#roles > span').forEach(function(element){
        spans.push(element.textContent);
 });