javascript - 检测源是否为 CSS/HTML/JavaScript

Question

我想使用 js beautify在某些来源上，但没有办法检测它是什么类型的来源。有什么方法可以检测来源是 css、html、javascript 还是无？

看看他们的site他们有这个，看起来它会弄清楚它是否是 html:

function looks_like_html(source) {
    // <foo> - looks like html
    // <!--\nalert('foo!');\n--> - doesn't look like html
    var trimmed = source.replace(/^[ \t\n\r]+/, '');
    var comment_mark = '<' + '!-' + '-';
    return (trimmed && (trimmed.substring(0, 1) === '<' && trimmed.substring(0, 4) !== comment_mark));
}

只需要看看它是 css、javascript 还是两者都不是。这是在 node.js 中运行的

所以这段代码需要告诉我它是 JavaScript:

var foo = {
    bar : 'baz'
};

这段代码需要告诉我它是 CSS:

.foo {
    background : red;
}

所以一个测试这个的函数会返回类型:

function getSourceType(source) {
    if (isJs) {
        return 'js';
    }
    if (isHtml) {
        return 'html';
    }
    if (isCss) {
        return 'css';
    }
}

在某些情况下，我需要忽略 Java 等其他语言，但对于 css/html/js，我可以使用美化器。

Answer 1

简答:几乎不可能。

- 感谢 Katana 的意见

原因:一个有效的 HTML 可以包含 JS 和 CSS(通常也是如此)。 JS 可以同时包含 css 和 html(即:var myContent = '< div >< style >CSS-Rules< script >JS Commands';)。甚至 CSS 也可以在注释中包含两者。

因此，为此几乎不可能编写解析器。你只是不能轻易地将它们分开。

这些语言有关于如何编写它们的规则，你想做的是反向架构一些东西并检查这些规则是否适用。这可能不值得付出努力。

---

方法 1

如果要求值得付出努力，您可以尝试在源上运行不同的解析器，看看它们是否会抛出错误。 IE。 Java 可能不是有效的 HTML/JS/CSS，而是有效的 Java 代码(如果编写正确的话)。

---

方法 2- 感谢 Bram 的意见

但是，如果您非常了解源代码并且假设这些事情不会出现在您的代码中，您可以尝试使用正则表达式进行以下操作。

示例

<code><div>This div is HTML var i=32;</div></code> 
<code>#thisiscss { margin: 0; padding: 0; }</code>
<code>.thisismorecss { border: 1px solid; background-color: #0044FF;}</code>
<code>function jsfunc(){ { var i = 1; i+=1;<br>}</code>

解析

$("code").each(function() {
    code = $(this).text();
   if (code.match(/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2/)) {
      $(this).after("<span>This is HTML</span>");
   }
   else if (code.match(/(([ trn]*)([a-zA-Z-]*)([.#]{1,1})([a-zA-Z-]*)([ trn]*)+)([{]{1,1})((([ trn]*)([a-zA-Z-]*)([:]{1,1})((([ trn]*)([a-zA-Z-0-9#]*))+)[;]{1})*)([ trn]*)([}]{1,1})([ trn]*)/)) {
      $(this).after("<span>This is CSS</span>");
   }
   else {
      $(this).after("<span>This is JS</span>");
   }
});

它的作用:解析文本。

HTML

如果它包含像'<'这样的字符，后跟br(或上面的任何其他标签)，然后是'>'，那么它就是html。 (也包括一个检查，因为您也可以比较 js 中的数字)。

CSS

如果它是由模式名称(可选)后跟 .或 # 后跟 id 或 class 后跟 { 你应该从这里得到它...在上面的模式中，我还包括可能的空格和制表符。

JS

否则就是 JS。

您也可以像这样执行 Regex:如果它包含 '= {' 或 'function...' 或 ' 那么 JS.还要进一步检查正则表达式以更清楚地检查和/或提供白名单和黑名单(如 'var' 但周围没有 < 或 >，'function(asdsd,asdsad){assads}' ..)

Bram 的开头是:

$("code").each(function() {
   code = $(this).text();
   if (code.match(/^<[^>]+>/)) {
       $(this).after("<span>This is HTML</span>");
   }
   else if (code.match(/^(#|\.)?[^{]+{/)) {
     $(this).after("<span>This is CSS</span>");
   }
});

更多信息:

http://regexone.com是一个很好的引用。另请查看 http://www.sitepoint.com/jquery-basic-regex-selector-examples/寻找灵感。