分析CSS属性的字符串-Javascript_Javascript_Html_Css_Regex

分析CSS属性的字符串-Javascript

javascript html css regex

分析CSS属性的字符串-Javascript,javascript,html,css,regex,Javascript,Html,Css,Regex,我必须解析这个Javascript字符串以增加字体大小、行高和宽度，因为当前文本对于我们的移动用户来说太小了。不幸的是，我无法控制这个糟糕的字符串，因此，无法以任何方式修改输入。基本上，我正在破解一个旧的iFrame nftext=new String(''+ '<html>'+ '<head>'+ '<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">'+ '<meta http-equ

我必须解析这个Javascript字符串以增加字体大小、行高和宽度，因为当前文本对于我们的移动用户来说太小了。不幸的是，我无法控制这个糟糕的字符串，因此，无法以任何方式修改输入。基本上，我正在破解一个旧的iFrame

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 FROM 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 from 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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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 ~a~%</td>'+
'<td align=right style="line-height:10pt; border-bottom:solid black 1.0pt;"><b>&bull;</b>&nbsp;</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>&bull;</b>&nbsp;</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 are based on a 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 to close</div>'+
'</body></html>');

nftext=新字符串（“”+
''+
''+
''+
''+
''+
'html，正文{高度：100%；宽度：100%；溢出：隐藏；}'+
'html{溢出：隐藏；边框：纯黑1pt；}'+
'正文{margin:0px；padding:0px；字体系列：Arial，Helvetica，无衬线；字体大小：8pt；}'+
'td{font size:8pt；}'+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+c1+'营养事实'+c2+
''+
''+
“营养事实”+
''+
c1+“上菜量”+c2+
'服务大小~servsize~'+
c1+“每餐量”+c2+
''+
“每份的数量”+
''+
c1+“热量/脂肪热量”+c2+
''+
'卡路里~c~'+
“来自脂肪的热量~cf~”+
''+
c1+“每日价值”+c2+
''+
“%Daily Value”+
''+
c1+‘总脂肪’+c2+
''+
'总脂肪~脂肪~g'+
“~fatp~%”+
''+
c1+‘饱和脂肪’+c2+
''+
' '+
“饱和脂肪~sfat~g”+
“~sfatp~%”+
''+
c1+‘反式脂肪’+c2+
''+
' '+
“反式脂肪酸~tfat~”+
''+
c1+‘胆固醇’+c2+
''+
'胆固醇~chl~mg'+
“~chp~%”+
''+
c1+‘钠’+c2+
''+
“钠~sod~mg”+
“~sodp~%”+
''+
c1+‘总碳水化合物’+c2+
''+
“总碳水化合物~b~g”+
“~bp~%”+
''+
c1+‘膳食纤维’+c2+
''+
' '+
‘膳食纤维~df~g’+
“~dfp~%”+
''+
c1+‘糖’+c2+
''+
' '+
'糖~sug~g'+
''+
c1+‘蛋白质’+c2+
''+
“蛋白质~pro~g”+
''+
c1+‘维生素A/维生素C’+c2+
''+
‘维生素A~A~%’+
“&bull；”+
‘维生素C~cp~%’+
''+
c1+‘钙/铁’+c2+
''+
'钙~上升~%'+
“&bull；”+
‘铁~ip~%’+
''+
c1+“基于”+c2+
''+
'*'+
“每日百分比值基于2000”+
“卡路里饮食。”+
''+
“~rname~~rdesc~”+
“~过敏原~”+
'移动鼠标或按Escape键关闭'+
'');

是否有一组正则表达式可以用来获取所需的内容？目前，我使用我编写的这个过于复杂的函数，它给出了不可靠的结果。它将正确替换某些属性，但对于其他属性，它将跳过替换，因为它在属性的第一个字母之后开始（例如：“Line height:”和“ont size:”）

函数findAndReplaceProperty（baseString、propertyName、replaceWith）{
var index=getmatchindex（baseString，propertyName）；
//替换每个属性
对于（var i=0；i-1）{
索引匹配。推送（匹配）；
i=匹配+匹配长度；
}
返回索引匹配；
}

首先提取样式标记的内容：

/\<style[^>]*\>([^<]+)\</

然后对每个结果匹配所有：

/([a-z]+)\s*:\s*([0-9a-zA-Z]+)\s*;/

去他妈的-在花了太多的时间之后，我决定用这个方法。它不…理想，但它工作得足够好

var replaced = popup.replace(/font-size:6.0pt;/g, 'font-size: 1em;');
replaced = replaced.replace(/font-size:6.5pt;/g, 'font-size: 1.25em;');
replaced = replaced.replace(/font-size:7pt;/g, 'font-size: .75em;');
replaced = replaced.replace(/font-size:7.5pt;/g, 'font-size: 1.5em;');
replaced = replaced.replace(/font-size:8pt;/g, 'font-size: 2em;');
replaced = replaced.replace(/font-size: 8pt;/g, 'font-size: 2em;');
replaced = replaced.replace(/font-size:17pt;/g, 'font-size: 3em;');

//increase width
replaced = replaced.replace(/width:210px;/g, 'width:800px;');

//increase line-height
replaced = replaced.replace(/line-height:6pt;/g, 'line-height:1em;');
replaced = replaced.replace(/line-height:6.0pt;/g, 'line-height:1em;');
replaced = replaced.replace(/line-height:8pt;/g, 'line-height:1.25em;');
replaced = replaced.replace(/line-height:8.0pt;/g, 'line-height:1.25em;');
replaced = replaced.replace(/line-height:10pt;/g, 'line-height:1.5em;');
replaced = replaced.replace(/line-height:10.0pt;/g, 'line-height:1.5em;');

console.log('final html: ' + replaced);

哦，我的天。为什么不定义你的html，body为10px，以及em中的其他所有内容？15px->1.5em。你所要做的就是将body设置为11px以增加所有内容

/([a-z]+)\s*:\s*([0-9a-zA-Z]+)\s*;/

var replaced = popup.replace(/font-size:6.0pt;/g, 'font-size: 1em;');
replaced = replaced.replace(/font-size:6.5pt;/g, 'font-size: 1.25em;');
replaced = replaced.replace(/font-size:7pt;/g, 'font-size: .75em;');
replaced = replaced.replace(/font-size:7.5pt;/g, 'font-size: 1.5em;');
replaced = replaced.replace(/font-size:8pt;/g, 'font-size: 2em;');
replaced = replaced.replace(/font-size: 8pt;/g, 'font-size: 2em;');
replaced = replaced.replace(/font-size:17pt;/g, 'font-size: 3em;');

//increase width
replaced = replaced.replace(/width:210px;/g, 'width:800px;');

//increase line-height
replaced = replaced.replace(/line-height:6pt;/g, 'line-height:1em;');
replaced = replaced.replace(/line-height:6.0pt;/g, 'line-height:1em;');
replaced = replaced.replace(/line-height:8pt;/g, 'line-height:1.25em;');
replaced = replaced.replace(/line-height:8.0pt;/g, 'line-height:1.25em;');
replaced = replaced.replace(/line-height:10pt;/g, 'line-height:1.5em;');
replaced = replaced.replace(/line-height:10.0pt;/g, 'line-height:1.5em;');

console.log('final html: ' + replaced);