Ответ 1
Краткий ответ: практически невозможно.
- Благодаря вводу Катаны
Причина: допустимый 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...' или 'then 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/ для вдохновения.