0

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?

Gosi
  • 2,004
  • 3
  • 24
  • 36
  • Why try for a regular expression match in the first place here; none of your codes appear to contain any wildcards, repetition etc. A simple _string match_ (indexOf) would suffice here, if you don't need to match any dynamic patterns. – CBroe Aug 31 '21 at 10:01

2 Answers2

1

You are not returning anything in your function.

Try something like this and see what is the output:

function compare(){

        var detectPhone = navigator.userAgent;
        var phoneModels = [
            {
                code: "SM-N975F",
                name: "Note 10"
            },
            {
                code: "SM-G900P",
                name: "Galaxy S5"
            }
        ]
        let model = document.getElementById("compare-phone-display")
        for(i = 0; i < phoneModels.length; i++) {
            if(detectPhone.match(phoneModels[i].code/g)) {
                model.innerHTML = phoneModels[i].name;
            }
        }
        return model.innerHTML;
    }
J_K
  • 688
  • 5
  • 12
1

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.
lejlun
  • 4,140
  • 2
  • 15
  • 31