How to get and store part of id of html element

Question

I'm working on a website that's an online version of a book. There are many versions of this book, so the website uses variable pagination to deal with various editions -- the user chooses his edition and the page numbers appear.

The pages are encoded in HTML tags. So, for example:

text 
<span id=ed19xxpgxxx> </span> 
text 2

where the id of the span tag is the edition and page number. This is repeated for every page break in every edition.

Now, what I need to do is be able to grab all the ids which start with the edition I'm working with, for example ed1939 . Then I need to get each of the page numbers connected with the ids and insert that page number. What I'm thinking is finding all those strings, cutting the page number information off of them, and then inserting them into the HTML. From my research ( 1 , 2 ) I think I need to use querySelectorAll . But I'm not very experienced, and I'm not sure how to do that. All of the reference I've seen so far deals with merely selecting ids with a common starting string, not manipulating them.

The solution in use right now is to use document.getElementById for every single unique id in a very long if block, which could probably be improved.

Answer 1

One possible solution is to find the common ancestor between all these span s. For example, if all the page numbers are contained in an element like this:

<div class="page-numbers">
   <span id=...>
   <span id=...>
</div>

Then you should be able to select all of them in one go, using:

document.querySelectorAll('.page-numbers span')

This will return a collection of DOM elements representing the page numbers. From there you can get their ids and cut off the information you need.

---

Answer 2

Here's an example of using document.querySelectorAll() to find spans following the pattern you've given us. This matches all spans with an id that begins with ed .

This isn't ideal and there are much better ways of doing this, but if you're stuck with the books in the format that you currently have them then this will suffice...

 var pages = document.querySelectorAll("span[id^=ed]"); pages.forEach(function(page) { console.log(page.id); }); 

 <span id="ed19pg100"> </span> <span id="ed19pg101"> </span> <span id="ed19pg102"> </span> <span id="ed19pg103"> </span> 

You just need to replace console.log() with whatever you want to do with the span, the page variable being the span inside the loop.

Answer 3

The current setup isn't ideal; parsing strings rather than having segregated data attributes (for example) is going to be slower, which could be a factor if you've got a LOT of elements (as it sounds like you might have.)

Anyway...

var my_edition = 'ed1939';

//get all elements pertaining to pages of this edition
var page_elements = document.querySelectorAll('[id^="'+my_edition+'"]');

//loop over them and, for each...
[].forEach.call(page_elements, function(el) {

    //...extract the page number via REGEX
    var page_num = el.getAttribute('id').match(/pg(\d+)$/);
    if (page_num) {

        //...append it to the page - note the number in isolation lives in page_num[1]
        el.innerHTML = '<p>Page: '+page_num[1]+'</p>'; //or whatever you want to do
    }
});