Code that will alert DOM Position [duplicate]
Possible Duplicate:
JQuery to check for duplicate ids in a DOM
Suppose i have a code:
<div id="one">
<div id="two"></div>
<div id="three"></div>
</div&g开发者_运维百科t;
<div id="four">
<div id="two"></div>
</div>
<div id="one">
<p id="five">
<span id="three"></span>
</p>
</div>
(a large HTML code with different DOM items).
Objective:
Is it possible to build a jQuery or JavaScript code that will alert me about duplication of ids within the document with the position. Here the position means like following;
> duplicate id: 'div#two' > within `div#four`, `div#one`
> duplicate id: 'div#one' > parent of `p#five`
> duplicate id: 'span#three' > within `p#five` and such a pattern.
Note:
I found a problem similar to me, but not exact. As it is not duplicate of any question asked before. So don't CLOSE IT.
If all you want to do is root out duplicate ids, you should validate your html.
http://validator.w3.org/
This will alert you to duplicate ids and make sure your code is well formed.
NOTE: Read all caveats. The point of this code is to illustrate the nature of the problem, which is that a pure JS solution is inadvisable.
First of all, hopefully what this is illustrates is that sometimes things that are doable are not always advisable. There are a ton of awesome tools out there that will provide far better error checking, like W3C's validator or add-ins/extensions that utilize it, like Validity for Chrome. Definitely use those.
But anyway, here's a minimalist example. Note that none of the DOM has references to its own line number, so you have to get the entire innerHTML attribute from the documentElement as a string. You match parts of that string, then break it into a substring at the match position, then count the number of carriage returns. Obviously, this code could be extensively refactored, but I think the point is clear (also jsFiddle example for those who want it, although the lines will be fubar):
EDIT
I've updated the regex to not match examples like <div>id="a"</div>. Still, if the OP wants something pure JS, he'll have to rely on this or a considerably more complex version with very minor benefits. The bottom line is that there are no associations between DOM nodes and line numbers. You will have to, on your own, figure out where the ID attributes are and then trace them back to their position. This is extremely error-prone. It might make some sense as programming practice but is extremely inadvisable in the real world. The best solution -- which I'm reiterating for the fourth time here -- is an extension or add-in that will just send your page on to a real validator like the W3C's.
The code below is designed to "just work," because there is no good way to do what the OP is asking.
<!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>
加载中,请稍侯......
精彩评论