解析字符串的CSS属性- Javascript

Parse string for CSS properties - Javascript

本文关键字：属性 Javascript CSS 字符串更新时间：2023-09-26

我必须解析这个Javascript字符串来增加font-size、line-height和width，因为文本目前对于我们的移动用户来说太小了。不幸的是，我无法控制这个乱七八糟的字符串，因此不能以任何方式修改输入。实际上，我正在破解一个旧的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>');

是否有一组正则表达式可以用来得到我需要的东西?目前我使用的是我编写的这个过于复杂的函数，它给出的结果并不可靠。它会正确地替换一些属性，但对于其他属性，它会跳过替换它们，因为它从属性的第一个字母之后开始(例如:' ine-height:'和'ont-size:')。

function findAndReplaceProperty( baseString, propertyName, replaceWith ){

 var indices = getMatchIndexes(baseString, propertyName);
    //replace each property
    for(var i = 0; i < indices.length; i++){
        //get original string
        var beginningOfWord = indices[i]; //word starts here
        var endOfWord = baseString.indexOf( ';' , beginningOfWord ); //css values always end at a 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 actually matches the property we want to replace
        //replace it
        if (replaceWith.substring(0,1) == strOriginal.substring(0,1)) {
         console.log('replacing ' + strOriginal + ' with ' + replaceWith);
         baseString = baseString.replace(strOriginal, replaceWith);
        }
        else{
         console.log('did not replace ' + strOriginal);
        }

    }
    return baseString;
}
//function getMatchIndexes from StackOverflow
function getMatchIndexes(str, toMatch) {
    var toMatchLength = toMatch.length,
        indexMatches = [], match,
        i = 0;
    while ((match = str.indexOf(toMatch, i)) > -1) {
        indexMatches.push(match);
        i = match + toMatchLength;
    }
    return indexMatches;
}

首先提取style tag的内容:

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

then match style for each element:

/([a-zA-Z,]+)['s'n'r]+'{([^}]+)'}/

然后为每个结果匹配所有:

/([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);