Jquery 警告DOM位置的代码_Jquery_Javascript

Jquery 警告DOM位置的代码

jquery javascript

Jquery 警告DOM位置的代码,jquery,javascript,Jquery,Javascript,可能重复：假设我有一个代码： <div id="one"> <div id="two"></div> <div id="three"></div> </div> <div id="four"> <div id="two"></div> </div> <div id="one"> <p id="five"> &l

可能重复：

假设我有一个代码：

<div id="one">
    <div id="two"></div>
    <div id="three"></div>
</div>

<div id="four">
    <div id="two"></div>
</div>

<div id="one">
  <p id="five">
    <span id="three"></span>
  </p>
</div>

注:

我发现了一个与我相似的问题，但并不确切。因为它不是以前提出的任何问题的重复。所以不要关闭它。

如果你只想清除重复的ID，你应该验证你的html

这将提醒您复制ID，并确保代码格式正确。

注意：阅读所有注意事项。这段代码的要点是说明问题的本质，即纯JS解决方案是不可取的

首先，希望这能说明，有时可行的事情并不总是可取的。有很多很棒的工具可以提供更好的错误检查，比如说，或者利用它的插件/扩展，比如Chrome。一定要用那些

但无论如何，这里有一个极简主义的例子。请注意，没有一个DOM引用它自己的行号，因此您必须从

documentElement

获取整个

innerHTML

属性作为字符串。匹配该字符串的部分，然后在匹配位置将其拆分为子字符串，然后计算回车数。显然，这段代码可以进行广泛的重构，但我认为这一点是明确的（也适用于那些需要它的人，尽管行是fubar）：

编辑

我已经更新了正则表达式，使其与

id=“a”

等示例不匹配。不过，如果OP想要一些纯JS的东西，他将不得不依赖这个或一个更复杂的版本，它的好处非常小。底线是DOM节点和行号之间没有关联。您必须自己找出ID属性的位置，然后将它们追溯到它们的位置。这极易出错。作为编程实践，它可能有一定的意义，但在现实世界中是极不可取的。最好的解决方案——我在这里第四次重申——是一个扩展或插件，它只会将您的页面发送到一个真正的验证器，比如W3C

下面的代码是为“只工作”而设计的，因为没有很好的方法来满足OP的要求

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="a"></div>
    <div id="a"></div> <!-- catches this -->
    <div id="b"></div>
    <div>id="a"</div>
    <div id="c"></div>
    <div id="c"></div> <!-- catches this -->
    <span>[id="a"]</span>
    <script>
    var re = /<[^>]+id="(.*?)"[^>]*>/g; // match id="..."
    var nl = /\n\r?/g;                  // match newlines
    var text = document.documentElement.innerHTML;
    var match;
    var ids = {};                       // for holding IDs
    var index = 0;
    while (match = re.exec(text)) {
      // Get current position in innerHTML
      index = text.indexOf(match[0], index + 1);

      // Check for a match in the IDs array
      if (match[1] in ids) {
        // Log line number based on how many newlines are matched 
        // up to current position, assuming an offset of 3 -- one
        // for the doctype, one for <html>, and one for the current
        // line
        console.log("duplicate match at line " +
          (text.substring(0, index).match(nl).length + 3));
      } else {
        // Add to ID array if no match
        ids[match[1]] = null;
      }
    }
    </script>
  </body>
</html>


试验
id=“a”
[id=“a”]
var re=/]+id=“（.*？”[^>]*>/g；//匹配id=“…”
变量nl=/\n\r？/g；//匹配换行符
var text=document.documentElement.innerHTML；
var匹配；
变量ID={}；//用于持有身份证
var指数=0；
while（match=re.exec（text））{
//获取innerHTML中的当前位置
index=text.indexOf（匹配[0]，索引+1）；
//检查IDs数组中是否存在匹配项
如果（匹配ID中的[1]）{
//根据匹配的换行数记录行号
//直到当前位置，假设偏移量为3--1
//对于doctype，一个用于，一个用于当前
//线
console.log（“第行重复匹配”+
（text.substring（0，index.match（nl.length+3））；
}否则{
//如果不匹配，则添加到ID数组
id[match[1]]=null；
}
}

为什么？为什么是JavaScript？在我看来，将JavaScript添加到此页面以查找重复的ID并不是真正有用的。您还可以使用W3C验证程序查找重复的ID：行号可能没有-我怀疑您是否可以从浏览器中获得它（除非InnerHTML保留原始文件中的空白，并且您将其从文档中解析出来-即使可能，也可能不值得）-但在DOM中的位置应该是可以实现的。@abdullah使用验证器将为您提供所有行号，此外还会发现其他错误。@Felix我对不使用JavaScript投了另一票。如果OP想把它作为一个调试工具，他应该研究插件和扩展（比如Chrome的solid）。此外，OP询问的最难的部分是行号。这在正则表达式中是可行的，但不是很合理。@bazmegakapa-更像是一个僵尸的想法，它闻起来很难闻，试图咬你，但人们总是把它带回来。嗨，朋友，我知道，但这不是验证的问题，bcos我知道它是无效的，因为id重复。现在我想使用jquery或javascript来实现它。我期待你对我的问题提出所有建议。事实上，有一个验证程序API，从未使用过：这似乎很有效，在解析HTML时，regex不是正确的使用方式。例如：

id=“a”

当然不应该被捕获为错误，就像

a[id=“a”]{}

@baz真的，-1？我很确定我的答案的全部要点是要展示从DOM节点提取行号时有多么丑陋。无论如何，我更新了正则表达式来解释可能永远不会出现在OP代码中的异常值。当然，它仍然会在

或类似的情况下失败。@Bryan你永远无法用正则表达式创建一个不会有问题的HTML解析器。不可能的。尽管有一些HTML解析器可能更适合。我对正则表达式HTML解析投了反对票，它永远不会起作用。@baz我100%意识到你不能100%准确地用正则表达式解析HTML。但a）重点不是重新创建DOM，而是找到一个具有相当精度的特定属性并计算换行。最明显的是，我给了OP警告，并告诉他使用其他东西。“有很多很棒的工具可以提供更好的错误检查…一定要使用这些工具…显然这些代码可以被广泛重构。”我绝对没有说过这是最好的解决方案，甚至是一个好的解决方案，只是这是一个最接近答案的东西。@Bryan你不必在陈述时使用正则表达式来获取行号。正如你所说，你的答案是关于注意事项，是关于使用其他东西。即使你给他一个“工作”代码，我们都知道他或其他人会使用。这件事与我无关

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="a"></div>
    <div id="a"></div> <!-- catches this -->
    <div id="b"></div>
    <div>id="a"</div>
    <div id="c"></div>
    <div id="c"></div> <!-- catches this -->
    <span>[id="a"]</span>
    <script>
    var re = /<[^>]+id="(.*?)"[^>]*>/g; // match id="..."
    var nl = /\n\r?/g;                  // match newlines
    var text = document.documentElement.innerHTML;
    var match;
    var ids = {};                       // for holding IDs
    var index = 0;
    while (match = re.exec(text)) {
      // Get current position in innerHTML
      index = text.indexOf(match[0], index + 1);

      // Check for a match in the IDs array
      if (match[1] in ids) {
        // Log line number based on how many newlines are matched 
        // up to current position, assuming an offset of 3 -- one
        // for the doctype, one for <html>, and one for the current
        // line
        console.log("duplicate match at line " +
          (text.substring(0, index).match(nl).length + 3));
      } else {
        // Add to ID array if no match
        ids[match[1]] = null;
      }
    }
    </script>
  </body>
</html>