html - Parse string for CSS properties - Javascript -
i have parse through javascript string increase font-size, line-height, , width, because text small our mobile users. unfortunately, have no control on awful mess of string, , such, cannot modify input in way. i'm hacking through old iframe, essentially.
nftext=new string(''+ '<html>'+ '<head>'+ '<meta http-equiv="x-ua-compatible" content="ie=emulateie7">'+ '<meta http-equiv=content-type content="text/html; charset=iso-8859-1">'+ '<style type="text/css">'+ 'html,body {height:100%; width:100%; overflow:hidden; }'+ ' html {overflow:hidden; border:solid black 1pt;}'+ ' body {margin:0px; padding:0px; font-family:arial,helvetica,sans-serif; font-size:8pt;}'+ ' td {font-size: 8pt;}'+ '</style>'+ '</head>'+ '<body>'+ '<div style="position:relative; border:solid black 1pt; '+ ' padding-top:2px; padding-left:3px; padding-right:2px; padding-bottom:0px; margin-left:1px; margin-top:1px; margin-bottom:0px; margin-right:1px;">'+ '<table valign="top" style="width:210px; padding:0px; border-collapse:collapse; margin:0px;">'+ '<tr>'+ '<td style="padding:0px; width:11px; font-size:1px;"></td>'+ '<td style="padding:0px; width:42px; font-size:1px;"></td>'+ '<td style="padding:0px; width:32px; font-size:1px;"></td>'+ '<td style="padding:0px; width:32px; font-size:1px;"></td>'+ '<td style="padding:0px; width:32px; font-size:1px;"></td>'+ '<td style="padding:0px; width:29px; font-size:1px;"></td>'+ '<td style="padding:0px; width:32px; font-size:1px;"></td>'+ '</tr>'+c1+' nutrition facts '+c2+ '<tr>'+ '<td colspan=7>'+ '<span style="font-size:17pt; letter-spacing:'+((browsertype=="firefox")?'2.5px;':'2.25px;')+ ' line-height:80%; margin-top:-10px; text-align:justify;"><b style="font-weight:600;">nutrition facts</b></span></td>'+ '</tr>'+ c1+' serving size '+c2+ '<tr><td colspan=7 style="line-height:10.0pt; border-bottom:solid black 8pt;">serving size ~servsize~</td></tr>'+ c1+' amount per serving '+c2+ '<tr>'+ '<td colspan=7 style="font-size:6.0pt; line-height:6.0pt; border-bottom:solid black 1pt;"><b>amount per serving</b></td>'+ '</tr>'+ c1+' calories / calories fat '+c2+ '<tr>'+ '<td colspan=3 style="line-height:10.0pt; border-bottom:solid black 3pt;"><b style="font-weight:600;">calories</b> ~c~</td>'+ '<td colspan=4 align=right style="line-height:10.0pt; border-bottom:solid black 3pt;">calories fat ~cf~</td>'+ '</tr>'+ c1+' daily value '+c2+ '<tr>'+ '<td colspan=7 align=right style="font-size:6.0pt; line-height:6.0pt; border-bottom:solid black 1pt;"><b>% daily value</b></td>'+ '</tr>'+ c1+' total fat '+c2+ '<tr>'+ '<td colspan=4 style="line-height:10pt; border-bottom:solid black 1.0pt"><b style="font-weight:600;">total fat</b> ~fat~g</td>'+ '<td colspan=3 align=right style="line-height:10pt; border-bottom:solid black 1pt;"><b style="font-weight:600;">~fatp~</b>%</td>'+ '</tr>'+ c1+' sat fat '+c2+ '<tr>'+ '<td style="width:11px; line-height:10pt;"> </td>'+ '<td colspan=4 style="line-height:10pt; border-bottom:solid black 1.0pt;">saturated fat ~sfat~g</td>'+ '<td colspan=2 align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">~sfatp~</b>%</td>'+ '</tr>'+ c1+' trans fat '+c2+ '<tr>'+ '<td style="width:11px; line-height:10pt; border-bottom:solid black 1.0pt;"> </td>'+ '<td colspan=6 style="line-height:10pt; border-bottom:solid black 1.0pt;"><i>trans</i> fat ~tfat~</td>'+ '</tr>'+ c1+' cholesterol '+c2+ '<tr >'+ '<td colspan=4 style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">cholesterol</b> ~chl~mg</td>'+ '<td colspan=3 align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">~chp~</b>%</td>'+ '</tr>'+ c1+' sodium '+c2+ '<tr>'+ '<td colspan=4 style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">sodium</b> ~sod~mg</td>'+ '<td colspan=3 align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">~sodp~</b>%</td>'+ '</tr>'+ c1+' total carbohydrates '+c2+ '<tr>'+ '<td colspan=6 style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">total carbohydrates</b> ~b~g</td>'+ '<td align=right style="line-height:10pt; border-bottom:solid black 1.0pt"><b style="font-weight:600;">~bp~</b>%</td>'+ '</tr>'+ c1+' dietary fiber '+c2+ '<tr>'+ '<td style="line-height:10pt;"> </td>'+ '<td colspan=4 style="line-height:10pt; border-bottom:solid black 1.0pt;">dietary fiber ~df~g</td>'+ '<td colspan=2 align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b style="font-weight:600;">~dfp~</b>%</td>'+ '</tr>'+ c1+' sugars '+c2+ '<tr>'+ '<td style="line-height:10pt; border-bottom:solid black 1.0pt;"> </td>'+ '<td colspan=6 style="line-height:10pt; border-bottom:solid black 1.0pt;">sugars ~sug~g</span></td>'+ '</tr>'+ c1+' protein '+c2+ '<tr>'+ '<td colspan=7 style="line-height:10pt; border-bottom:solid black 8.0pt;"><b>protein</b> ~pro~g</td>'+ '</tr>'+ c1+' vit a/vit c '+c2+ '<tr>'+ '<td colspan=3 style="line-height:10pt; border-bottom:solid black 1.0pt;">vitamin ~a~%</td>'+ '<td align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b>•</b> </td>'+ '<td colspan=3 align=right style="line-height:10pt; border-bottom:solid black 1.0pt;">vitamin c ~cp~%</td>'+ '</tr>'+ c1+' calcium/iron '+c2+ '<tr>'+ '<td colspan=3 style="line-height:10pt; border-bottom:solid black 1.0pt;">calcium ~up~%</td>'+ '<td align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b>•</b> </td>'+ '<td colspan=3 align="right" style="line-height:10pt; border-bottom:solid black 1.0pt;">iron ~ip~%</td>'+ '</tr>'+ c1+' based on '+c2+ '<tr>'+ '<td align=center valign=top style="line-height:8.0pt; padding-top:2px;">*</td>'+ '<td valign=top colspan=6 style="font-size:6.5pt; line-height:8.0pt; padding-top:2px;">percent daily values based on 2,000 '+ 'calorie diet.</td></tr></table></div>'+ '<div style="height:77px; font-size:7.5pt; line-height: 120%; margin-left:4px; margin-right:4px; margin-top:3px; margin-bottom:1px; vertical-align:top;">'+ '<b>~rname~</b><div style="line-height: 120%; font-size:7pt; margin-left:1px; margin-top:1px; margin-bottom:2px;">~rdesc~</div></div>'+ '<div style="z-index: 1; position:absolute; left:5px; right:2px; bottom:13px; font-size:7pt; color:#800000;">~allergen~</div>'+ '<div style="z-index: 0; position:absolute; text-align:center; left:0px; right:0px; bottom:0px; width:100%; font-size:7pt; color:#fff; background-color:#000; ">move mouse or press escape key close</div>'+ '</body></html>'); is there set of regular expressions can use need? use overly-complex function wrote gives me unreliable results. replaces properties correctly, others, skip on replacing them because starts after first letter of property (example: 'ine-height:' , 'ont-size:').
function findandreplaceproperty( basestring, propertyname, replacewith ){ var indices = getmatchindexes(basestring, propertyname); //replace each property for(var = 0; < indices.length; i++){ //get original string var beginningofword = indices[i]; //word starts here var endofword = basestring.indexof( ';' , beginningofword ); //css values end @ semicolon //actually grab css property var stroriginal = basestring.substring(beginningofword, endofword+1); //remove extraneous junk stroriginal = stroriginal.replace('{', ''); stroriginal = stroriginal.replace('=', ''); stroriginal = stroriginal.replace('"', ''); stroriginal = stroriginal.trim(); //if stroriginal matches property want replace //replace if (replacewith.substring(0,1) == stroriginal.substring(0,1)) { console.log('replacing ' + stroriginal + ' ' + replacewith); basestring = basestring.replace(stroriginal, replacewith); } else{ console.log('did not replace ' + stroriginal); } } return basestring; } //function getmatchindexes stackoverflow function getmatchindexes(str, tomatch) { var tomatchlength = tomatch.length, indexmatches = [], match, = 0; while ((match = str.indexof(tomatch, i)) > -1) { indexmatches.push(match); = match + tomatchlength; } return indexmatches; }
first extract content of style tag:
/\<style[^>]*\>([^<]+)\</ then match style each element:
/([a-za-z,]+)[\s\n\r]+\{([^}]+)\}/ then each result match all:
/([a-z]+)\s*:\s*([0-9a-za-z]+)\s*;/
Comments
Post a Comment