javascript - 如何在页面中搜索某些 ID 并将它们与 Javascript 中的变量匹配？

Question

我有一个字符串集合，我想从中选择以将文本插入到页面中。

字符串存储在对象/数组中，如下所示:

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world'
    x03: 'The quick brown fox',
    x04: 'jumped over'
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

在我的 HTML 中，我有 span 标签，其 ID 对应于上述变量。

但是，在任何一页上，在任何时候只会显示部分跨度。因此，例如，可能只有三个:

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

我想做的是能够搜索页面以收集所有符合命名约定(x 后跟两位数字)的 ID，然后将它们匹配到相应的变量，以便我可以填充跨度适当的文本。

类似的东西(这是一个粗略的大纲，不能作为实际代码):

array = getElementsByID(someKindOfMultipleSelect);
for (var key in array)
{
   document.getElementById(**IDandVarName**).innerHTML = strings.**IDandVarName**;
}

尽管对此进行了一些谷歌搜索，但我仍然坚持两点。我不知道如何从页面中收集我想要的 span ID，而且我不太清楚在获得它们后如何匹配它们。

是的，我对 Javascript 有点菜鸟，所以在解释这个问题时请耐心等待。

感谢您的任何建议。

Answer 1

下面是一个纯(而且非常简单)的 JavaScript 解决方案。这种解决方案避免了收集页面上的所有跨度(效率不高)，并且仅通过 ID 抓取元素。

HTML:

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

JavaScript:

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world',
    x03: 'The quick brown fox',
    x04: 'jumped over',
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

for (var key in strings) {
    var obj = document.getElementById(key);

    if(obj)
        document.getElementById(key).innerHTML = strings[key];
}

这是 a working fiddle .