Match a particular string in navigator.userAgent and get the details from an array of objects

I’m trying to create a compare function.

Objective:

To first get the information by using navigator.userAgent. Then, I’ll find a particular string (which is the phone’s model code) from an array of objects which contains the phone’s model code in it. Detailed explanation below.

I tried the help of the following, but it doesn’t completely work for me:

Detecting a mobile browser

How do I check Windows Phone useragent with javascript?

What I tried:

    <div id="compare-phone-display"></div>
    
    <script>
    function compare(){

        var detectPhone = navigator.userAgent;
        var phoneModels = [
            {
                code: "SM-N975F",
                name: "Note 10"
            },
            {
                code: "SM-G900P",
                name: "Galaxy S5"
            }
        ]

        for(i = 0; i < phoneModels.length; i++) {
            if(detectPhone.match(phoneModels[i].code/g)) {
                document.getElementById("compare-phone-display").innerHTML = phoneModels[i].name;
            }
        }

    }
compare();
</script>

Explanation of what I was trying to do:

First, I create an array of objects. The most important part here would be the code: value.

What I am trying to do is, from the output of navigator.userAgent, I want to find a part of the string that matches the code: value of the array.

So, for example, if the navigator.userAgent outputs something like:

“xxxxx xxxxx xxxxxSM-N975f”

then, I want to be able to detect that SM-N975f and be able to output its name property set in the array.

eg; “xxxxx xxxxx xxxxxSM-N975f” should be able to display “Note 10” in #compare-phone-display

Can someone point me in the right direction with this as its not displaying the name of the phone? Am I having a syntax error or is my entire logic is wrong?

Answer

The error comes from the way that you are constructing the Regular Expression,

You cannot place the text directly in the expression, you have to instead use the RegExp Constructor like this:

new RegExp(phoneModels[i].code, 'g')

Demo:

function compare(userAgent = navigator.userAgent) {
  var detectPhone = userAgent;
  var phoneModels = [
    {
      code: 'SM-N975F',
      name: 'Note 10',
    },
    {
      code: 'SM-G900P',
      name: 'Galaxy S5',
    },
  ];

  for (i = 0; i < phoneModels.length; i++) {
    if (detectPhone.match(new RegExp(phoneModels[i].code, 'g'))) {
      //document.getElementById('compare-phone-display').innerHTML = phoneModels[i].name;
      return phoneModels[i].name;
    }
  }
}

let S5 = 'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36'; // Galaxy S5
let NOTE10 = 'Mozilla/5.0 (Linux; Android 11; SM-N975F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36'; // Note 10

console.log(compare(S5));
console.log(compare(NOTE10));
I made some changes so that the code works as a demo.