Этот скрипт помогает веб‑разработчикам автоматически анализировать фрагменты кода на странице и показывать, какие языки программирования или разметки в них используются.
Как это работает:
Поиск блоков кода. Скрипт находит все HTML‑элементы с классом .codeMessage — именно в них размещение исходного кода.
Анализ содержимого.
Для каждого найденного блока скрипт извлекает текст (код) и проверяет его на признаки трёх популярных
веб‑технологий:
HTML — ищет угловые скобки < и >, но исключает случаи с фигурными скобками { (чтобы не спутать с шаблонами);
CSS — ищет типичные свойства вроде color: или font-size:, а также директивы типа @media;
JavaScript — ищет ключевые слова: function, var, let, const.
Определение количества языков.
На основе найденных признаков формируется список языков. Скрипт учитывает, сколько языков обнаружено:
если найден один язык — в выводе будет «Язык: [название]»;
если найдено два и более языка — выводится «Языки: [список через запятую]».
Визуализация результата.
Для каждого блока кода создаётся новая HTML‑метка (элемент <div> с классом .language-label), где отображается результат анализа. Эта метка размещается сразу после исходного блока кода.
Где может пригодиться:
на образовательных ресурсах с примерами кода;
в блогах и статьях о веб‑разработке;
на платформах для обмена кодом (типа CodePen, JSFiddle);
для автоматической документации проектов.
Код
<script>
// author sergey Chumadov, site HTMLSTART.UCOZ.NET
const codeBlocks = document.querySelectorAll('.codeMessage');
// Функция для определения языков
function detectLanguages(code) {
const languages = [];
// Проверка на HTML
if (code.includes('<') && code.includes('>') && !code.includes('{')) {
languages.push('HTML');
}
// Проверка на CSS
if (code.includes('@media') || code.includes('color:') || code.includes('font-size:')) {
languages.push('CSS');
}
// Проверка на JavaScript
if (code.includes('function') || code.includes('var') ||
code.includes('let') || code.includes('const')) {
languages.push('JavaScript');
}
return languages;
}
// Проходим по каждому блоку и определяем языки
codeBlocks.forEach(block => {
const codeContent = block.innerText;
const languages = detectLanguages(codeContent);
// Формируем строку с языками или меткой "Не определён"
let languagesString;
if (languages.length > 0) {
languagesString = languages.join(', ');
} else {
languagesString = 'Не определён';
}
// Определяем, какое слово использовать: «язык» или «языки»
const languageLabel = (languages.length === 1) ? 'Язык' :
(languages.length > 1) ? 'Языки' : 'Язык';
// Создаём новый блок для вывода названий языков
const languageBlock = document.createElement('div');
languageBlock.className = 'language-label';
languageBlock.textContent = `${languageLabel}: ${languagesString}`;
// Вставляем блок с названиями языков после блока с кодом
block.parentNode.insertBefore(languageBlock, block.nextSibling);
});
</script>
// author sergey Chumadov, site HTMLSTART.UCOZ.NET
const codeBlocks = document.querySelectorAll('.codeMessage');
// Функция для определения языков
function detectLanguages(code) {
const languages = [];
// Проверка на HTML
if (code.includes('<') && code.includes('>') && !code.includes('{')) {
languages.push('HTML');
}
// Проверка на CSS
if (code.includes('@media') || code.includes('color:') || code.includes('font-size:')) {
languages.push('CSS');
}
// Проверка на JavaScript
if (code.includes('function') || code.includes('var') ||
code.includes('let') || code.includes('const')) {
languages.push('JavaScript');
}
return languages;
}
// Проходим по каждому блоку и определяем языки
codeBlocks.forEach(block => {
const codeContent = block.innerText;
const languages = detectLanguages(codeContent);
// Формируем строку с языками или меткой "Не определён"
let languagesString;
if (languages.length > 0) {
languagesString = languages.join(', ');
} else {
languagesString = 'Не определён';
}
// Определяем, какое слово использовать: «язык» или «языки»
const languageLabel = (languages.length === 1) ? 'Язык' :
(languages.length > 1) ? 'Языки' : 'Язык';
// Создаём новый блок для вывода названий языков
const languageBlock = document.createElement('div');
languageBlock.className = 'language-label';
languageBlock.textContent = `${languageLabel}: ${languagesString}`;
// Вставляем блок с названиями языков после блока с кодом
block.parentNode.insertBefore(languageBlock, block.nextSibling);
});
</script>
