如何在表格中找到重复的ID？答案

【问题标题】：How to find duplicate id's in a form?如何在表格中找到重复的ID？
【发布时间】：2012-07-24 18:07:00
【问题描述】：

我创建了一个包含大约 800 个字段的表单。不知不觉中，我为表单中的几个字段提供了相同的 id。如何追踪它们？

【问题讨论】：

快速解决方案：validator.w3.org
提供更多细节。你的 HTML 表单是什么形式的？
notepad++ 或文本管理员查找和替换以更改它们
迈克尔，我猜他们想找到重复的。仅当您知道要查找的内容时，搜索/替换才能正常工作。

【解决方案1】：

这可能对你有帮助

Source: Finding duplicate ID’s on an HTML page

在 HTML 页面上查找重复 ID

Eneko Alonso 于 2011 年 5 月 6 日撰写

看起来有时我们忘记了元素 ID 在 HTML 页面上是唯一的。这是我的一些代码刚刚写了在页面上查找重复的 ID（在您的浏览器的 javascript 控制台）：

var idList = {};
var nodes = document.getElementsByClassName('');
for (var i in nodes) {
  if (!isNaN(i) && nodes[i].id) {
    idList[nodes[i].id] = idList[nodes[i].id]? idList[nodes[i].id]+1:1;
  }
}
for (var id in idList) {
  if (idList[id] > 1) console.log("Duplicate id: #" + id);
}

【讨论】：

这将起作用，只需编辑它，以便将行 var nodes = document.getElementsByClassName(''); 更改为 var nodes = document.getElementsByTagName('input');

【解决方案2】：

默认Notepad++ 具有语法高亮功能，如果您双击一个单词来选择它，它将高亮显示同一单词的所有其他出现。您将不得不做一些（可能很多）手动工作来重命名事物，我的意思是因为字段无法提供自己的唯一名称。

【讨论】：

更好地开始。他一定知道副本在哪里。

【解决方案3】：

http://validator.w3.org/ 将是方便的解决方案。但是使用 jquery 你可以这样做：

//See your console for duplicate ids

$('[id]').each(function(){
  var id = $('[id="'+this.id+'"]');
  if(id.length>1 && id[0]==this) {
    console.log('Duplicate id '+this.id);
    alert('duplicate found');
  }
});

希望这会有所帮助。

【讨论】：

【解决方案4】：

我创建了一个示例供您查看，它会在页面上的表单/元素中查找所有重复的 ID，并将重复的 ID 名称打印到控制台。

数组contains方法取自this post。

<html>
    <body>
        <form id="frm">
            <input type="text" id="a" />
            <input type="text" id="b" />
            <input type="text" id="c" />
            <input type="text" id="d" />
            <input type="text" id="e" />
            <input type="text" id="f" />
            <input type="text" id="a" />
            <input type="text" id="h" />
            <input type="text" id="i" />
            <input type="text" id="j" />
            <input type="text" id="d" />
            <input type="text" id="l" />            
        </form>
    </body>
    <script type="text/javascript">
        Array.prototype.contains = function(obj) { //Add a 'contains' method to arrays
            var i = this.length;
            while (i--) {
                if (this[i] === obj) {
                    return true;
                }
            }
            return false;
        }

        frm = document.getElementById('frm'); //Get the form
        els = frm.getElementsByTagName('input'); //Get all inputs within the form

        ids = new Array(els.length); //Create an array to hold the IDs

        for(e = 0; e < els.length; e++) { //Loop through all of the elements
            if(ids.contains(els[e].id)) //If teh array already contains the ID we are on
                console.log('Duplicate: '+els[e].id); //Print 'Duplicate: {ID}' to the console

            ids.push(els[e].id); //Add the ID to the array
        }

    </script>
</html>

上面的代码会输出如下：

重复：一个

重复：d

【讨论】：

【解决方案5】：

仅使用数组方法的单一衬线：

[].map.call(document.querySelectorAll("[id]"), 
     function (e) {
        return e.id;
     }).filter(function(e,i,a) {
        return ((a.lastIndexOf(e) !== i) && !console.log(e));
     })

记录每个重复项并返回一个包含 ID 的数组（如果找到）。

【讨论】：

【解决方案6】：

有一个名为 Dup-ID 的 Chrome 扩展程序，如果您安装它，您只需按下按钮即可检查重复的 id。安装链接：https://chrome.google.com/webstore/detail/dup-id-scans-html-for-dup/nggpgolddgjmkjioagggmnmddbgedice

【讨论】：

它还会打印出页面上找到的所有 id-s。