在纯Javascript中，ID以结尾

我在一个Javascript库中工作，该库引入jQuery是为了一件事：一个“ends with”选择器。看起来是这样的：

$('[id$=foo]')

它将找到

id

以“foo”结尾的元素

---

我希望在没有jQuery（纯JavaScript）的情况下实现这一点。你会怎么做？我还希望它尽可能高效。

您需要迭代页面上的所有元素，然后使用字符串函数对其进行测试。我能想到的唯一优化是更改起始点，即不是

document.body

，而是您知道元素将是其子元素的其他元素，或者如果您知道元素的标记名，您可以使用

document.getElementsByTagName（）

获取元素列表

---

但是，如果您可以使用一些第三方javascript，例如（4k小型化，与jQuery使用的选择器引擎相同），您的任务将变得更加容易。

如果您知道要针对的DOM元素的类型， 然后使用

getElementsByTagName

获取对它们的引用列表，然后对它们进行迭代

您可以使用此优化加快迭代：

• 忽略没有id的元素

• 将要查找的元素的最近的已知父元素作为目标，假设您的元素位于id='myContainer'的div中，那么您可以使用

  document.getElementById（'myContainer'）.getElementsByTagName（'*'）

  ，然后对它们进行迭代

---

使用

查询选择器all

。它的工作原理基本上类似于jQuery：

---

所以，使用上面所说的一切，我把这些代码组合在一起。假设我的元素都是

input

s，那么下面的代码可能是我得到的最好的代码了

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

function getInputsThatEndWith(text) {

    var result = new Array();
    var inputs = document.getElementsByTagName("input");

    for(var i=0; i < inputs.length; i++) {
        if(inputs[i].id.endsWith(text))
            result.push(inputs[i]);
    }

    return result;
}

String.prototype.endsWith=函数（后缀）{
返回this.indexOf（后缀，this.length-suffix.length）！=-1；
};
函数getInputsThatEndWith（文本）{
var result=新数组（）；
var inputs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i

---

我把它放在JSFIDLE上：
@ThiefMaster谈到了如何进行检查，但下面是实际代码：

function idEndsWith(str)
{ 
  if (document.querySelectorAll)
  {
    return document.querySelectorAll('[id$="'+str+'"]');
  }
  else
  {
    var all,
      elements = [],
      i,
      len,
      regex;

    all = document.getElementsByTagName('*');
    len = all.length;
    regex = new RegExp(str+'$');
    for (i = 0; i < len; i++)
    {
      if (regex.test(all[i].id))
      {
        elements.push(all[i]);
      }
    }
    return elements;
  }
}

此函数中的

str

变量没有验证/转义，假设它只接收字符串。
建议更改：

RegExp.quote=函数（str）{
返回str.replace（/（[.？*+^$[\]\\（）{}-]）/g，“\\$1”）；
}; // 从…起https://stackoverflow.com/questions/494035/#494122
String.prototype.endsWith=函数（后缀）{
return！！this.match（新的RegExp（RegExp.quote（后缀）+'$）；
};
函数getInputsThatEndWith（文本）{
var结果=[]，
输入=document.getElementsByTagName（“输入”），
numInputs=inputs.length，
输入；
对于（变量i=0；i

使用正则表达式而不是

indexOf（）

来实现

String.endsWith

，这主要是一个偏好问题，但我认为它值得包括在内。如果您不关心后缀中特殊字符的转义，可以删除

RegExp.quote（）

位，只需使用


---

newregexp（后缀+'$）

您能提供更多信息吗？您的目标是什么类型的dom元素？就我所知，它们都是输入标记，但上面的查询没有指定这一点。我正在重新使用一个现有的库，所以我不能完全确定。我需要这段代码在任何地方都可以使用，但是+1用于JS Fiddle的介绍。很酷！对于属性值以指定值开头的元素，请使用

[attribute^=value]

。

function idEndsWith(str)
{ 
  if (document.querySelectorAll)
  {
    return document.querySelectorAll('[id$="'+str+'"]');
  }
  else
  {
    var all,
      elements = [],
      i,
      len,
      regex;

    all = document.getElementsByTagName('*');
    len = all.length;
    regex = new RegExp(str+'$');
    for (i = 0; i < len; i++)
    {
      if (regex.test(all[i].id))
      {
        elements.push(all[i]);
      }
    }
    return elements;
  }
}

function idEndsWith(str, context)
{
  if (!context)
  {
    context = document;
  }
  ...CODE... //replace all occurrences of "document" with "context"
}

RegExp.quote = function(str) {
     return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
}; // from https://stackoverflow.com/questions/494035/#494122

String.prototype.endsWith = function(suffix) {
    return !!this.match(new RegExp(RegExp.quote(suffix) + '$'));
};

function getInputsThatEndWith(text) {

    var results = [],
        inputs = document.getElementsByTagName("input"),
        numInputs = inputs.length,
        input;

    for(var i=0; i < numInputs; i++) {
        var input = inputs[i];
        if(input.id.endsWith(text)) results.push(input);
    }

    return results;
}