Detect Browser in JavaScript

How to detect browser in JavaScript [Chrome, Firefox, Safari, Opera, Edge , MS IE]?

JavaScript detect browser name: Here in this article we learn how to detect browser in javascript. I had a requirement where based on browser I have to display something different. In short, I have to detect firefox browser in javascript and display the respective message to the user. Same if the user browser is chrome, then display respective message. Basically we write code in JavaScript to check user browser. Which help answer to our question .i.e How do I know if I am using IE or Chrome in JavaScript? Here we are detecting 5 major browsers and that are Chrome, Firefox, Safari, Opera, MS Edge. And we are showing 2 different approach to detect browser at client-side i.e using userAgent.match and userAgent.indexOf with live demo example. Although based on different browser display different content is not good practise.

Steps to detect browser name in JavaScript

1. HTML markup to display browser name.
2. JavaScript code to detect browser using useragent.match
3. JavaScript code to detect browser using useragent. indexOf

HTML markup to display browser name

First, we create a new index.html page and add the below markup. Here we add an h1 tag, which will display the browser name on page-load.

Approach 1: JavaScript code to detect browser name using userAgent.match

To detect user browser information we use the navigator.userAgent property. And then we match with the browser name to identify the user browser.

JS code to identify browser is as written below:

function fnBrowserDetect()< let userAgent = navigator.userAgent; let browserName; if(userAgent.match(/chrome|chromium|crios/i))< browserName = "chrome"; >else if(userAgent.match(/firefox|fxios/i)) < browserName = "firefox"; >else if(userAgent.match(/safari/i))< browserName = "safari"; >else if(userAgent.match(/opr\//i)) < browserName = "opera"; >else if(userAgent.match(/edg/i))< browserName = "edge"; >else < browserName="No browser detection"; >document.querySelector("h1").innerText="You are using "+ browserName +" browser"; >

Now call this JS function on page load, and this will display the user browser name on page load.

Approach 2: JavaScript code to detect browser using userAgent.IndexOf

Here in the 2nd approach we again using navigator.userAgent with indexof to figure out the browser name.

var browserName = (function (agent) switch (true) < case agent.indexOf("edge") >-1: return "MS Edge"; case agent.indexOf("edg/") > -1: return "Edge ( chromium based)"; case agent.indexOf("opr") > -1 && !!window.opr: return "Opera"; case agent.indexOf("chrome") > -1 && !!window.chrome: return "Chrome"; case agent.indexOf("trident") > -1: return "MS IE"; case agent.indexOf("firefox") > -1: return "Mozilla Firefox"; case agent.indexOf("safari") > -1: return "Safari"; default: return "other"; > >)(window.navigator.userAgent.toLowerCase()); 
document.querySelector("h1").innerText="You are using "+ browserName +" browser"; 
 
With the above code will be able to detect chrome browser, also with approach 2, we are able to detect MS Edge browser chromium based. By checking trident we were able to detect MS Internet Explorer browser IE in javascript.
 
Conclusion: Hereby using the navigator.userAgent we were successfully able to detect Chrome, Firefox, Edge, Safari, and Opera browser in Javascript. Add display the browser name on page load. It's in pure javascript, as we didn't use any external JS library for the browser detection. 
 
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
 
 PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee 
 
Subscribe to our newsletter
 
Get the latest and greatest from Codepedia delivered straight to your inbox.
 
Your email address will not be published. Required fields are marked *
 
Источник
 
How to detect the user browser with JavaScript
 
Learn how to detect which browser the user is running (Chrome, IE, LightHouse, FireFox, Safari, etc.) using plain JavaScript.
 
You can check which browser the user is running using plain JavaScript.
 
To detect the user browser, you need to analyze the property userAgent of the object navigator .
 
If you want to do something specific, for example, provide a polifill for a regular expression when the browser is Safari, you do this:
 
if (navigator.userAgent.includes('Safari')) < // the user is running Safari // do something useful > 
 
On the other hand, if you want to do something for all browsers but Chrome , you check if the userAgent doesn’t include your search string:
 
if (!navigator.userAgent.includes('Chrome')) < // the user is NOT running Chrome > 
 
Using indexOf and toLowerCase
 
As an alternative to includes you can also use the indexOf method. If it returns -1 , this means that the search string wasn’t found.
 
if (navigator.userAgent.indexOf('Chrome')  0) < // the user is NOT running Chrome > 
 
If you’re not sure how exactly the user browser is spelled, you can try using the toLowerCase function on the navigator.userAgent .
 
if (navigator.userAgent.toLowerCase().indexOf('chrome')  0) < // the user is NOT running Chrome > 
 
Источник
 
Как определить браузер пользователя с помощью JavaScript
 
Узнайте, как определить браузер пользователя с помощью JavaScript и почему это важно для совместимости веб-разработки.
 
 
Определение браузера пользователя — важная задача, так как различные браузеры могут иметь разные особенности в реализации стандартов и поддержке функций. В этой статье мы рассмотрим, как определить браузер пользователя с помощью JavaScript.
 
Навигатор (navigator) объект
 
JavaScript предоставляет встроенный объект navigator , который содержит информацию о браузере пользователя. Этот объект имеет свойство userAgent , которое содержит строку, идентифицирующую браузер, версию и другие сведения.
 
Пример использования navigator.userAgent :
 
console.log(navigator.userAgent);
 
📝 Обратите внимание, что navigator.userAgent может быть легко подделан, поэтому не стоит полностью полагаться на этот метод для определения браузера пользователя.
 
Создание функции для определения браузера
 
Для определения браузера пользователя можно создать функцию, которая анализирует строку navigator.userAgent . Вот пример такой функции:
 
function detectBrowser() < const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.indexOf('firefox') > -1) < return 'Firefox'; >else if (userAgent.indexOf('chrome') > -1) < return 'Chrome'; >else if (userAgent.indexOf('safari') > -1) < return 'Safari'; >else if (userAgent.indexOf('opera') > -1 || userAgent.indexOf('opr') > -1) < return 'Opera'; >else if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('trident') > -1) < return 'Internet Explorer'; >else < return 'Unknown'; >> console.log(detectBrowser()); // выводит название браузера
 
🚀 Эта функция сначала преобразует строку navigator.userAgent в нижний регистр и затем проверяет наличие ключевых слов, характерных для определенных браузеров.
 
🔧 Важно: подход с использованием navigator.userAgent может дать неправильные результаты, особенно если пользователь вручную изменил эту строку или использует стороннее расширение, которое меняет ее.
 
Заключение
 
Теперь вы знаете, как определить браузер пользователя с помощью JavaScript. Обратите внимание, что этот метод не является совершенным и не гарантирует точных результатов, но в большинстве случаев будет работать корректно. Вместо определения браузера рекомендуется использовать функции определения возможностей, которые проверяют поддержку конкретных функций браузером.
 
Источник