javascript getelement，其中值包含特定字符串

Question

我想计算具有文本类名称的输入字段的出现次数，其中该文本输入包含特定值。

document.getElementById('c_files').getElementsByClassName('text').length;

到目前为止，这计算了类名称为 text 的所有文本框，但是我如何才能使其值具体化，比如说，如果我有 50 个文本框，但我只想计算该文本框的值 contains abc 的文本框字符串中的某处。

谢谢。

编辑：谢谢大家的时间和回答，我已经投票给你们了，但我更喜欢约翰·布皮特的解决方案，所以这就是我会接受的解决方案。再次感谢。

Answer 1

您可以迭代元素并查看哪些元素具有所需的值：

var elems = document.getElementById('c_files').getElementsByClassName('text');

var count = 0;
for(var i = 0; i < elems.length; i++) {
    if(elems[i].value.match(/abc/)) count++;
}

Answer 2

您可以先选择所有文本框，然后过滤符合您条件的文本框。例如，通过使用

Array.prototype.filter

方法：

var allText  = document.getElementById('c_files').getElementsByClassName('text'),

    filtered = [].filter.call(allText, function(textbox) {
        return textbox.value.indexOf('abc') > -1;
    });

上面的代码将生成文本元素数组，其中值包含子字符串“abc”。

Answer 3

嗨，我认为你需要回顾一下这篇文章-

https://stackoverflow.com/a/9558906/3748701
https://stackoverflow.com/a/10095064/3748701

这将有助于您获得解决方案。

Answer 4

您需要循环遍历具有指定类别的所有文本框并从那里计算它。

类似以下逻辑的东西应该有效：

var counter = 0;
var inputElements = document.getElementById('c_files').getElementsByClassName('text').length;
for (var i = 0; i < inputElements.length; i++) {
    if (inputElements.value == "someText") {
        counter++;
    }
}

Answer 5

虽然有点晚了，但如果有更“最新”的解决方案，那就是使用

document.evaluate

来利用 XPath 表达式的强大功能。

// utility function 
const getnodes=(expr, parent)=>{
  let results=[];
  let contextNode = parent || document;
  let query = document.evaluate(expr, contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (let i = 0, length = query.snapshotLength; i < length; ++i) {
    results.push(query.snapshotItem(i));
  }
  return results;
};


// suitable XPath to navigate DOM and find elements of interest
let expr='//*[ @id="c_files" ]/input[ @class="text" ][ contains(@value,"abc") ]';
let col=getnodes(expr);

if( col.length > 0 )console.log(col);

<form id='c_files'>
  <input class='text' name='f[]' value='abcdef'><!-- this -->
  <input class='text' name='f[]' value='defghi'>
  <input class='text' name='f[]' value='hijklm'>
  <input class='text' name='f[]' value='nopqrs'>
  <input class='text' name='f[]' value='tuvwxy'>
  <input class='text' name='f[]' value='wxabcyz'><!-- this -->
  <input class='text' name='f[]' value='abcxyz'><!-- this -->
  <input class='text' name='f[]' value='defacb'>
</form>