看看他们的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我可以使用美化器.
解决方法
– 感谢Katana的意见
原因：有效的HTML可以包含JS和CSS(它通常会). JS可以包含css和html(即：var myContent =’< div>< style> css-Rules< script> JS Commands’).甚至CSS也可以包含在评论中.
所以写一个解析器这个接近不可能.你不能轻易地分开它们.
这些语言有关于如何编写它们的规则,你想做什么是反向架构师的东西,并检查这些规则是否适用.这可能不值得的努力.
方法1
如果要求值得您努力,您可以尝试在源代码上运行不同的解析器,并查看它们是否丢失错误.即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或类,然后{你应该从这里得到它…在上面的模式中,我还包括可能的空格和制表符.
JS
否则它是JS.
你也可以像Regex一样：如果它包含’= {‘或’function …’或’然后JS.还要检查正则表达式以更清楚地检查和/或提供白名单和黑名单(例如“var”,但不包括其中的“&”),函数(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/的灵感.
