1+
2+
3+ < code-explorer-html >
4+
5+ < template shadowrootmode =open >
6+
7+ < style >
8+
9+ .html
10+ {display : flex;gap : 5px }
11+ .html .line
12+ {width : 50px ;flex-shrink : 0 ;border-right : 1px solid lightgray}
13+ .html .indent
14+ {}
15+ .html .name
16+ {font-weight : bold;flex-shrink : 0 }
17+ .html .v
18+ {flex-shrink : 0 ;font-size : var (--val )}
19+ .html .id
20+ {color : blue;flex-shrink : 0 ;font-size : var (--val )}
21+ .html .class
22+ {flex-shrink : 0 ;color : green;font-size : var (--val );font-style : italic}
23+
24+ </ style >
25+
26+ < div class ='html item '>
27+ < div class =line >
28+ </ div >
29+ < div class =indent >
30+ </ div >
31+ < div class =name >
32+ </ div >
33+ < div class =v >
34+ </ div >
35+ < div class =id >
36+ </ div >
37+ < div class =class >
38+ </ div >
39+ </ div >
40+
41+ </ template >
42+
43+ < script >
44+
45+ ( function ( { mod, host} ) {
46+
47+ var obj = {
48+ version : 'v1.0' ,
49+ } ;
50+
51+ var df = true , did = 'code-explorer-html' ;
52+
53+
54+ obj . initmod = function ( ...list ) {
55+
56+ list . . forEach ( params => {
57+ } ) ;
58+
59+ } //initmod
60+
61+
62+ //:
63+
64+
65+ //:
66+
67+
68+ obj . init = async function ( ) {
69+ } //init
70+
71+
72+ //:
73+
74+
75+ obj . initdom = async function ( ) {
76+ } //initdom
77+
78+
79+ //:
80+
81+
82+ parse . html = function ( txt ) {
83+
84+ var list = [ ] ;
85+ var regex = / < \/ ? [ a - z ] [ a - z 0 - 9 \- ] * \b [ ^ > ] * > / gi;
86+ var regex = / < \/ ? [ a - z ] [ a - z 0 - 9 \- ] * (? = [ \s \/ > ] ) [ ^ > ] * > / gi;
87+
88+ while ( true ) {
89+
90+ var match = regex . exec ( txt ) ;
91+ if ( match === null ) break ;
92+
93+ var index = match . index ;
94+ var tag = match [ 0 ] ;
95+
96+ if ( ! tag . startsWith ( '</' ) ) {
97+ //console.log(tag);
98+ var match = tag . match ( / ^ < \s * ( [ a - z 0 - 9 \- ] + ) / i) ;
99+ var name = match ? match [ 1 ] . toLowerCase ( ) : '' ;
100+
101+ /*
102+ var match = tag.match(/^<\s*\/?\s*([a-z0-9\-]+)/i);
103+ var name = match ? match[1].toLowerCase() : '';
104+ console.log(name);
105+ */
106+
107+ if ( ! name ) {
108+ //debugger;
109+ console . log ( 'parse.html error' , tag ) ;
110+ }
111+
112+ var attrs = { } ;
113+
114+ if ( name ) {
115+ var parser = new DOMParser ( ) ;
116+ var doc = parser . parseFromString ( tag , 'text/html' ) ;
117+ var element = doc . querySelector ( name ) ;
118+ if ( ! element ) {
119+ console . log ( 'parse.html error' , tag ) ;
120+ } else {
121+ var attrs = { } ;
122+
123+ for ( var i = 0 ; i < element . attributes . length ; i ++ ) {
124+
125+ var attr = element . attributes [ i ] ;
126+ attrs [ attr . name ] = ( attr . value === '' ? true : attr . value ) ;
127+
128+ } //for
129+
130+ var line = lineno ( txt , index ) ;
131+ var col = colno ( txt , index ) - 1 ;
132+ var indent = parse . indent ( txt , index ) ;
133+
134+ var o = {
135+ index,
136+ line,
137+ col,
138+ indent,
139+ name,
140+ attrs
141+ } ;
142+ list . push ( o ) ;
143+ }
144+ }
145+ }
146+
147+ } //while
148+
149+ return list ;
150+
151+
152+ } //html
153+
154+
155+
156+ //:
157+
158+
159+ return obj ;
160+
161+ //code-explorer-html
162+ } )
163+
164+ </ script >
165+
166+ </ code-eplorer-html>
0 commit comments