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 &gt;&lt; won't change .split.
no close tag? close null.


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -