盛大面试题：js检查页面上有无重复id（可用框架jquery）

注:请考虑效率问题，因为页面上可能有上千id。

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script type="text/javascript">
    function createDiv(){
    var html = [], id;
    for(var i = 0; i < 2000; i++){
    id = "divId" + parseInt(Math.random() * 10000);
    html.push("<div id='" + id + "'>" + id + "</div>");
    }
    document.body.innerHTML = html.join("");
    }
    window.onload = function(){
    createDiv();

    var oID = {} , result = {}, arr = [],
    tags = document.getElementsByTagName("*");
    for(var i = 0, id; i < tags.length; i++){
    id = tags[i].id;
    if(id){
    oID[id] = oID[id] ? oID[id] + 1 : 1;
    if(oID[id] > 1){
    result[id] = id + " " + oID[id];
    }
    }
    }
    for(var o in result){
    arr.push(result[o]);
    }
    alert(arr.join("\t"));
    };
      </script>
     </HEAD> <BODY>
     </BODY>
    </HTML>
      

  2.   

    1楼代码中tags.length如果能用临时变量保存起来,速度能快很多
      

  3.   

    Markkk
    １楼的方法虽然能实现，但我想应该会有更快捷的方法。
      

  4.   

    /<(\w+)\sid=['|"](\w+)['|"].*>.*<(\w+)\sid=['|"]\2['|"].*>/.test(document.body.innerHTML)正则写的不一定完整 差不多就这个意思
      

  5.   

    var res=false,
    id,
    temp={},
    tags= document.getElementsByTagName("*"),
    i=0,len=tags.length;
    for(;i<len;i++){
        id=tags[i].id;
        if(typeof(temp[id])==="undefined"){
            temp[id]=1;
        }else {
            res=true;
            break;
        }
    }
    alert((res?"是":"否"));
      

  6.   

    补充：只需检查即可，一旦有重复的即alert()出重复项。请计算执行时间，
    如：
    <script>
    window.onload = function(){
        var time1 = new Date();
        //var a = 执行代码,并返回重复项
        var time2 = new Date();
        var time = time2 - time1;
        alert("用时" + time + "毫秒");
        //alert(a);
        //页面元素定在1000个。
    }
    </script>
    <body>
        <script>
         var html = [], id;
            for(var i = 0; i < 1000; i++){
                html.push("<div id='a" + id + "'>" + id + "</div>");
            }
            document.body.innerHTML = html.join("");
        </script>
        <div id="a50">此乃重复项</div>
    </body>
      

  7.   

    （楼上有点问题，以这贴为准）
    补充：只需检查即可，一旦有重复的即alert()出重复项。请计算执行时间，
    如：
    <script>
    window.onload = function(){
      var time1 = new Date();
      //var a = 执行代码,并返回重复项
      var time2 = new Date();
      var time = time2 - time1;
      alert("用时" + time + "毫秒");
      //alert(a);
      //页面元素定在1000个。
    }
    </script>
    <body>
    <script>
      var html = [];
      for(var i = 0; i < 1000; i++){
      html.push("<div id='a" + i + "'>" + i+ "</div>");
      }
      document.body.innerHTML = html.join("");
    </script>
        <div id="a50">此乃重复项</div>
    </body>
      

  8.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script type="text/javascript">
    window.onload = function(){
    var tags = document.getElementsByTagName("*"),
    count = tags.length, time, ret = {}, id;
    time = new Date();
    for(var i = 0; i < count; i++){
    id = tags[i].id;
    if(id){
    if(ret[id]){
    alert(id + "\n用时：" + (new Date() - time));
    return;
    }else{
    ret[id] = true;
    }
    }
    }
    alert("未找到相同ID");
    }
      </script>
     </HEAD> <BODY>
      <script type="text/javascript">
    (function(){
    var html = [], rnd = parseInt(Math.random() * 1000);
    for(var i = 0; i < 1000; i++){
    html.push("<div id='a" + i + "'>" + i + "</div>");
    };
    //在随机位置插入一个随机的id
    i = parseInt(Math.random() * 1000);
    html[i] = html[i] + ("<div id='a" + rnd + "'>" + rnd + "</div>");
    document.write(html.join(""));
    })();
      </script>
     </BODY>
    </HTML>
      

  9.   


    var eles = document.all;
    for (var i = 0; i < eles.length; i++) {
         if (eles[i].id != "") {
           var idp = eles[i].id;
           var len = $("[id=" + idp + "]").size();
           if (len > 1) {
             alert("页面有重复的ID");break; }
                        }
                    }
      

  10.   

    我也来写一个看看：
    var el = document.all;
    vat d = new ActiveXObject("Scripting.Dictionary");
    for (var i = 0; i < el.length; i++) {
         if (el[i].id != "") {
    if (d.Exists(el[i].id)){
    alert("有重复id")
    return alert("有重复id")
    }else{
    d.add(el[i].id,"")
    }
    }
    }
      

  11.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ajax-test</title>
    <script type="text/javascript">
    function checkid() {
    var lengthtag = document.getElementsByTagName("*");
    var j = 0;
    var idarray = new Array();
    for(var i = 0;i<lengthtag.length;i++) {
    var objid = lengthtag[i].getAttribute("id");
    if(objid) {
     idarray[j] = objid;
    j++;
    }
    }
    for(var k=0;k<=j;k++) {
    for(var x=k+1;x<=(j-1);x++) {
    if(idarray[k] == idarray[x]) {
    alert("ok");
    return false;
    }
    //alert(idarray[k]+"="+k+"--"+idarray[x]+"="+x);
    }
    }
    j--;
    alert("no");
    return false;
    }
    </script>
    </head>
    <body>
    <div id="r8"></div>
    <div></div>
    <div id="r3"></div>
    <div id="r5"></div>
    <div id="r7"></div>
    <div id="r5"></div>
    <div id="r11"></div>
    <a href="javascript:checkid()">getid</a>
    </body>
    </html>
      

  12.   

    odjjjjjjjjjjjjjjjjjksdlfjasldddddddd接口即可老师的上的浪费空间阿萨德力反馈dddddddd
      

  13.   

    正则应该比较省事：
    获取出来就好办了，var q=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");q.open("GET",location.href,false);q.send();
    alert(q.responseText.match(/\s+id\s*=\s*["']*(\w+)*["']*/g).toString());
      

  14.   

    ding  ,xiexie  .luguo
      

  15.   


    页面元素干吗定1000个? 来10000个吧：<script>
    window.onload = function(){
        var hsh = {}, arr = [], t = new Date();   
        var o = document.getElementsByTagName("*");
        for(var i=0; !!o[i]; i++)
        !o[i].id || !hsh[o[i].id] && (hsh[o[i].id]="*") || (arr[arr.length]=o[i].id);
        alert("用时：" + [new Date()-t] + "毫秒");
        alert("重复项为：" + arr.join(""))
    }
    </script>
    <body>
    <script>
    var html = [];
        for(var i = 0; i < 10000; i++){
            html.push("<div id='a" + i + "'>" + i+ "</div>");
        }
    document.body.innerHTML = html.join("");
    </script>
    <div id="a50">此乃重复项</div>
    </body>
    本地低配置测试：
    IE 8.0.6：438ms
    FF 3.6.4：145ms
      

  16.   

    怎么没人用jquery的框架来写下啊？
      

  17.   

     jquery 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>  <TITLE> New Document </TITLE> 
    <script type="text/javascript"src="jquery.js" > </script>
    <script type="text/javascript"> $(function(){
    var html = [], id;
    for(var i = 0; i < 1000; i++){
    id= parseInt(Math.random() * 10000);
    html.push("<div id='a" +id  + "'>"  +id+ "</div>");
    }
    html.push("<div id='a111'>a111</div>");
    html.push("<div id='a111'>a111</div>");
    document.body.innerHTML = html.join("");
    var date= new Date();
    var ids=$("*[id]");
    var temp=[];
    var returnV=$.grep(ids,function(tag,i){
    var jqueryTag=$(tag);
    var id=jqueryTag.attr("id")
    var ins=$.inArray(jqueryTag.attr('id'),temp );
    temp.push(id);
         return ins>-1;
    });
    alert(returnV.length);
    var returnIds=[];
    for (var i=0;i<returnV.length;i++){
    returnIds.push(returnV[i].id);
    }
    alert(new Date()-date+"mm");
    alert(returnIds.join());
    });
     
    </script>  </HEAD>  <BODY>  </BODY> </HTML>
      

  18.   

    刚刚测试了一下：
    数量：2000个ID，每个浏览器测试5次左右
    chrome: 2ms
    FF: 7ms
    IE7: 100ms+
    这个差距好像有点大嘛
      

  19.   

    if(id){
               if(ret[id]){
                        alert(id + "\n用时：" + (new Date() - time));
                        return;
               }else{
                        ret[id] = true;
                    }
            }为什么要加上if(id)?
      

  20.   

    哟，又顶上来了，我再优化下下，这样效率高些：<script>
    window.onload = function(){
        var t = new Date(), hsh = {}, arr = [], d;   
        var o = document.getElementsByTagName("*");
        var m = o.length;
        while(--m)
        !(d=o[m].id) || !hsh[d] && (hsh[d]="*") || (arr[arr.length]=d);
        alert("用时：" + [new Date()-t] + "毫秒");
        alert("重复项为：" + arr.join(""))
    }
    </script>
    <body>
    <script>
    var html = [];
        for(var i = 0; i < 10000; i++){
            html.push("<div id='a" + i + "'>" + i+ "</div>");
        }
    document.body.innerHTML = html.join("");
    </script>
    <div id="a50">此乃重复项</div>
    </body>
    本地相同配置测试(5次平均)：
    IE 8.0.6：157ms （比原来438ms加快281ms）
    FF 3.6.4：90ms  （比原来145ms加快55ms）
    Chrome 6.0.422： 50ms
    Safari 4.0.5：   40ms
    Opera 10.60：    20msBTW：测试效率应该从TAG索引开始提取全程时间样本，例如“document.getElementsByTagName("*")”是很费时间的。
      

  21.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script type="text/javascript">
        window.onload = function(){
            var tags = document.getElementsByTagName("*"),
                count = tags.length, time, ret = {}, id;
            time = new Date();
            for(var i = 0; i < count; i++){
                id = tags[i].id;
                if(id){
                    if(ret[id]){
                        alert(id + "\n用时：" + (new Date() - time));
                        return;
                    }else{
                        ret[id] = true;
                    }
                }
            }
            alert("未找到相同ID");
        }
      </script>
     </HEAD> <BODY>
      <script type="text/javascript">
        (function(){
            var html = [], rnd = parseInt(Math.random() * 1000);
            for(var i = 0; i < 1000; i++){
                html.push("<div id='a" + i + "'>" + i + "</div>");
            };
            //在随机位置插入一个随机的id
            i = parseInt(Math.random() * 1000);
            html[i] = html[i] + ("<div id='a" + rnd + "'>" + rnd + "</div>");
            document.write(html.join(""));
        })();
      </script>
     </BODY>
    </HTML>
      

  22.   

    var o=document.getElementsByTagName("*"),i=o.length,d,h={},r=[];
    while(--i)(d=o[i].id)&&(h[d]?++h[d]-2?0:r.push(d):h[d]=1);
      

  23.   

    var o=document.getElementsByTagName("*"),i=o.length,d,h={},r=[];
    while(--i)(d=o[i].id)&&(h[d]?++h[d]-2?0:r.push(d):h[d]=1);
    //输出 r