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.

If those `span`s had a common class you could select them all in a single swipe and then manipulate them. — Federico klez Culloca, Feb 07 '18 at 14:19
It probably won't come as news to you that the current setup is far from optimal, for the reasons you're finding. This could be avoided if you had data attributes, say - one for the edition, and one for the page, rather than having to parse an ID string. — Mitya, Feb 07 '18 at 14:20
I agree with Federico klez Culloca, having a shared class for each one of your spans would make this much simpler. — Ryan Wilson, Feb 07 '18 at 14:21
If I did make all the `span`s have one class (which wouldn't be that hard, with multiple cursors), how would I then get the page number out of the id? — abias, Feb 07 '18 at 15:08

score 0 · Answer 1 · answered Feb 07 '18 at 14:23

One possible solution is to find the common ancestor between all these spans. 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.

score 0 · Answer 2 · answered Feb 07 '18 at 14:26

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.

It matches all span elements with an id attribute that starts with `ed` — Reinstate Monica Cellio, Feb 07 '18 at 15:15

score 0 · Accepted Answer · answered Feb 07 '18 at 14:29

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
    }
});

How to get and store part of id of html element

3 Answers3