如何获取和存储html元素的部分id答案

【问题标题】：How to get and store part of id of html element如何获取和存储html元素的部分id
【发布时间】：2018-02-07 14:17:34
【问题描述】：

我正在开发一个网站，该网站是一本书的在线版本。这本书有很多版本，所以网站使用可变分页来处理不同的版本——用户选择他的版本，页码就会出现。

页面以 HTML 标记编码。所以，例如：

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

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

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

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

【问题讨论】：

如果那些spans 有一个共同的类，你可以在一次滑动中选择它们，然后操作它们。
由于您正在寻找的原因，当前的设置远非最佳，这对您来说可能不会成为新闻。如果您有数据属性，例如 - 一个用于版本，一个用于页面，则可以避免这种情况，而不必解析 ID 字符串。
我同意 Federico klez Culloca 的观点，为您的每个跨度设置一个共享类会更简单。
如果我确实让所有spans 都有一个类（这不会那么难，有多个游标），那么我将如何从 id 中获取页码？跨度>
<span class='pagebreak' data-edition='ed1939' data-page='1'>，例如。

标签： javascript html

【解决方案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
    }
});

【讨论】：

【解决方案2】：

一种可能的解决方案是找到所有这些spans 之间的共同祖先。例如，如果所有页码都包含在这样的元素中：

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

然后你应该能够一次选择所有这些，使用：

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

这将返回代表页码的 DOM 元素集合。从那里您可以获取他们的 id 并切断您需要的信息。

【讨论】：

【解决方案3】：

这是一个使用document.querySelectorAll() 来按照您给我们的模式查找跨度的示例。这匹配所有 id 以 ed 开头的 span。

这并不理想，有更好的方法可以做到这一点，但如果你坚持使用现有格式的书籍，那么这就足够了......

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>

您只需将console.log() 替换为您想对跨度执行的任何操作，page 变量就是循环内的跨度。

【讨论】：

对不起，span[id^=ed] 是什么意思？
匹配所有id属性以ed开头的span元素