Определяем браузер пользователя и подставляем его название в страницу

Задача

Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.

Решение нашел здесь.

JavaScript имеет стандартный объект под названием navigator, который содержит данные о браузере пользователя.

Объект navigator имеет много свойств, но в данном случае нас интересует свойство .UserAgent — это строка содержит данные о браузере, операционной системе и многое другое.

// Выводим информацию в окне предупреждений
alert(navigator.userAgent);

Получим такие данные в браузере Mozilla Firefox:

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0

Как вы можете видеть, проблема с navigator.userAgent в том, что это одна гигантская строка, и она не очень понятна для человека.

Так что, если вы хотите использовать эту информацию, или показать её пользователю, то нужно сначала распарсить строку. Но если вы не дружите с регулярными выражениями, то вам всегда поможет библиотека Detect.js созданная Darcy Clarke.

Чтобы во всем документе заменить текст внутри блоков с классом .user-agent на название вашего браузера, я написал небольшой скрипт:

$(function(){
  var user = detect.parse(navigator.userAgent);
  var userAgent = user.browser.family;
  $(".user-agent").text(userAgent);
});

И я точно знаю, что вы читаете эту статью в браузере Chrome! =)