dom - Get an HTML element's line number -
was wondering if there better way find elements line number in sources code.
this i've go far:
// item user clicking on: var focused = doc.getselection().anchornode; if(focused.nodetype == 3){ // text node focused = focused.parentnode; } // entire page string // note: <!doctype> not included in this! var pagestr = doc.documentelement.outerhtml; // focused node's parent , // find begins in page. var parentnodestr = focused.outerhtml; var parentnodeindex = pagestr.indexof(parentnodestr); // find focused node begins in it's parent. var focusedstr = focused.outerhtml; var focusedindex = parentnodestr.indexof(focusedstr); // find focused node begins in overall page. var actualindex = parentnodeindex - focusedindex; // grab text above focused node // , count number of lines. var contentabove = pagestr.substr(0, actualindex); var linenumbers = contentabove.split("\n").length; console.log("linecount", linenumbers);
here's better solution i've come with, down road that's using ace or codemirror in conjunction contenteditable:
setup (for newbies)
we can obtain user selecting using:
var sel = document.getselection(); the beginning of selection called "anchor" , end called "focus". example, when select few words of text, there beginning , end of selection.
var anchorpoint = elementpointincode(sel.anchornode, sel.anchoroffset); var focuspoint = elementpointincode(sel.focusnode, sel.focusoffset); since html contains tags , readable text, there offset. example:
<p>abcdefgh</p> // ...^ the offset index within text node string. in our example letter "d" offset 4 characters entry point of >p< tag. offset 0 based, offset 3.
we offset using:
var offset = sel.anchoroffset; // -- or -- var offset = sel.focusoffset; ... depending on want, beginning of end.
function
function elementpointincode(element, offset) { // there may or may not offset. offset = offset || 0; var node = element; // process first node because it'll more-than-likely text node. // , don't want go matching text against of node html. // e.g. <a href="page.html">page 1</a> // text "page" sould match "page" within <a> attributes. var strindex; var str; // bump text nodes parent if(node.nodetype == 3) { node = node.parentnode; str = node.outerhtml; strindex = str.indexof(">") + offset + 1; } else { strindex = ; } // contain html string of root node. var parentnodestr = ""; while(node){ // current node's html. var str = node.outerhtml; // preemptively snag parent var parent = node.parentnode; if(parent && str){ // <html> root, won't have parent. var outer = parent.outerhtml; if(outer){ // stash node's html post processing. parentnodestr = outer; // cumulatively count offset's within each node strindex += parentnodestr.indexof( str ); } } // work our way root node = parent; } // chop root html our cumulative string index var str = parentnodestr.substr(0, strindex); var astr = str.split("\n" ); return { row : astr.length, col : astr.pop().length } };
Comments
Post a Comment