문자열의 코드가 JS 또는 CSS 코드 조각인지 구분하는 방법은 무엇입니까?

Question

간단한 POST 요청을 통해 코드 문자열을받습니다. 자바 스크립트 스크립트 또는 CSS 스크립트인지 구분할 수있는 영리한 방법 (스크립트 자체를 실행하지 않고도)을 찾고 있습니다. 말하자면 55 % 가능성). 이

는 이러한 문자열 없습니다 파일, 그래서 내가 문자열의 코드에 대한 정보가없는, 어떤 파일도없고, 파일 내선, 아니 헤더 ...

당신이 어떤 조언/자원이 있습니까 ?

감사합니다.

Answer 1

이 코드도 깨진 코드에서 작동해야하는 경우 "대표적인 CSS"및 "일반 JS"를 검색하고 JS에 대해 얼마나 이야기하는지, CSS에 대해 얼마나 많이 비교하는지 가장 좋은 기회라고 생각합니다.

JS의 대표적인 예는 reserved words이며 operators입니다. CSS에 대한 일반적인

는 구조입니다 : [, 구분 선택기] 특정 언어의 일부입니다 얼마나 전달 된 문자열의 평가 triy

먼저 몇 가지 유틸리티 {[;은 키 - 값 쌍을 구분]} .

//returns **kind of** a percentage of how much of the string has been identified as JS/CSS 
function evaluateCode(pattern, commentPattern, correctionalFactor){ 
    correctionalFactor = +correctionalFactor || 1; 
    return function(string){ 
     //removing comments and compacting whitespace. 
     //this avoids false hits, and provides a better estimation of how much significant text/code we have (to compute the percentage) 
     var t = string.replace(commentPattern || "", "").replace(/\s+/, " "); 

     return correctionalFactor * (t.match(pattern) || []).reduce(sumLengths, 0)/t.length; 
    } 
} 
var sumLengths = (acc, match) => acc + match.length; 

var evaluateJS = evaluateCode(
    /\b(?:function|return|arguments|this|var|const|let|typeof|instanceof|Array|Object)\b|[+\-*/<>&|=]+|[()\[\]\{\}]/g, 
    /\/\*[\s\S]*\*\/|\/\/[^\n]*/g, 
    1.5 
); 

var evaluateCSS = evaluateCode(
    /[a-z0-9\.#:\[\]=,\s-]+\{(?:\s*[a-z-]+\s*:[^;]+;?)*\s*\}/gi, 
    /\/\*[\s\S]*\*\//g 
); 

그리고 사용 (아주 기본적인 접근 방식은, 그러므로 또한 깨진 코드로 작동합니다),

var jsRatio = evaluateJS(string), 
    cssRatio = evaluateCSS(string); 

//If there's less than 10% difference between the two estimations, I'd call it "unclear" 
if(Math.abs(jsRatio - cssRatio) < .1){ 
    console.log("result is ambigious, but I tend more towards"); 
} 
console.log("%s (probabilities: css %f%, js %f%)", cssRatio > jsRatio? "css": "js", cssRatio, jsRatio); 

내가 evaluateJS 1.5의 추정/추측 "교정 요소"를 사용을 정규식 일치하기 때문에 CSS의 일부분 인 은 css-regex가 거의 모든 것과 일치하는 반면.

이 요인은 결과가 모호한 경우에만 중요합니다. 일반적으로 두 비율 간에는 큰 차이가 있어야합니다.

편집 : CSS를 검색 할 수있는 또 다른 (아마도 더 나은) 정규식 : 오히려 전체보다

/[a-z0-9\-]+\s*:[^;{}]+[;}]|(?:[#.]?[a-z]+(?:[#.:\s][a-z0-9-_]+)*\s*[,{])/gi 

이 ID와 클래스를 포함하는 경우에만 키 - 값 쌍과 "전형적인"선택기를 찾고 있습니다 구조, 어떤 CSSFS 구조가 깨진 경우 또는 상당히 간단한 정규식에 대해 너무 복잡하면 benefial 수 있어야합니다.

Answer 2

반환 된 문자열을 JavaScript가 실행되는 것을 막는 블록에 넣고 구문 분석 할 수 있는지 확인하십시오.

function isJavaScript(str) 
{ 
    try 
    { 
     Function('function(){' + str + '}'); 
     return true; // Looks like valid JS 
    } 
    catch (error) 
    { 
     // no valid JavaScript, may be CSS 
     return false; 
    } 
} 

나는 이것이 100 % 완벽하다고 생각하지 않지만, 귀하의 목적에 부합 할 수 있습니다.