javascript - How do you find the (string) length of a starting tag or ending tag? -
i'm trying write jquery or pure javascript function (preferring more readable solution) can count length of starting tag or ending tag in html document.
for example,
<p>hello.</p> would return 3 , 4 starting , ending tag lengths. adding attributes,
<span class="red">warning!</span> would return 18 , 7 starting , ending tag lengths. finally,
<img src="foobar.png"/> would return 23 , 0 (or -1) starting , ending tag lengths.
i'm looking canonical, guaranteed-to-work-according-to-spec solution, i'm trying use dom methods rather manual text manipulations. example, solution work weird cases like
<p>spaces infiltrating ending tag</ p > and
<img alt="unended singleton tags" src="foobar.png"> and such. is, hope long use proper dom methods, should able find number of characters between < , > no matter how weird things get, even
<div data-tag="<div>">html-like strings within attributes</div> i have looked @ jquery api (especially manipulation section, including dom insertion , general attributes subsections), don't see help.
currently best idea have, given element node is
lengthofendtag = node.tagname.length + 3; lengthofstarttag = node.outerhtml.length - node.innerhtml.length - lengthofendtag; but of course don't want make such assumption end tag.
(finally, i'm familiar regular expressions—but trying avoid them if @ possible.)
edit
@pointy , @squint helped me understand it's not possible see </ p >, example, because html discarded once dom created. that's fine. objective, adjusted, find length of start , end tags as rendered in outerhtml.
an alternate way use xmlserializer's serializetostring on clone copy of node (with id set) avoid having parse innerhtml, split on "><"
var tags = (function () { var x = new xmlserializer(); // scope doesn't need remade return function tags(elm) { var s, a, id, n, o = {open: null, close: null}; // spell stuff var if (elm.nodetype !== 1) throw new typeerror('expected htmlelement'); n = elm.clonenode(); // clone rid of innerhtml id = elm.getattribute('id'); // re-apply id clone if (id !== null) n.setattribute('id', id); // if set s = x.serializetostring(n); // serialise = s.split('><'); if (a.length > 1) { // has close tag o.close = '<' + a.pop(); o.open = a.join('><') + '>'; // join "just in case" } else o.open = a[0]; // no close tag return o; } }()); // self invoke init after running this, can access .length of open , close properties
tags(document.body); // {open: "<body class="question-page">", close: "</body>"} what if attribute's value has >< in it? xmlserializer escapes >< won't change .split.
no close tag? close null.
Comments
Post a Comment