javascript - 如何获取并存储html元素的部分id

Question

我正在开发一个网站，该网站是一本书的在线版本。这本书有很多版本，因此网站使用可变分页来处理各种版本——用户选择他的版本并显示页码。

页面以 HTML 标记进行编码。因此，例如:

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

其中span标签的id是版本和页码。每个版本中的每个分页符都会重复此操作。

现在，我需要做的是能够获取以我正在使用的版本开头的所有 id，例如 ed1939。然后我需要获取与 id 连接的每个页码并插入该页码。我的想法是找到所有这些字符串，从中删除页码信息，然后将它们插入到 HTML 中。根据我的研究(1，2)，我认为我需要使用querySelectorAll。但我经验不足，不知道该怎么做。到目前为止，我看到的所有引用资料都仅涉及选择具有公共(public)起始字符串的 id，而不是操作它们。

现在使用的解决方案是对很长的 if block 中的每个唯一 id 使用 document.getElementById，这可能会得到改进。

Answer 1

当前设置并不理想；解析字符串而不是分离数据属性(例如)会更慢，如果您有很多元素(听起来像您可能有)，这可能是一个因素。

无论如何...

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