get value from URL string in JavaScript with regex

Question

I would like to get specific fruits values from URL string in JavaScript. The fruits that I would like to get is apple, pear, white pear, banana and banana brazil.

The value from url's that I should get are:

www.ourfruit.net/fruit/apple_is_healthy.html (value: apple)
www.ourfruit.net/fruit/pear_is_healthy.html (value: pear)
www.ourfruit.net/fruit_offer/white_pear_discount.html (value: white-pear)
www.ourfruit.net/fruit_offer/banana_love.html (value: banana)
www.ourfruit.net/fruit_export/banana_brazil_export.html (value: banana-brazil)

The value from url's that I should not get are:

www.ourfruit.net/fruit/red_apple_is_healthy.html

www.ourfruit.net/fruit_offer/green_banana_love.html

www.ourfruit.net/fruit_export/banana_brazil_yellow_quality_export.html

My attempt based on this solution Regular expression to find two strings anywhere in input is

function findFruits() {
    var url_path = window.location.pathname;
    var url_path = url_path.replace(/\//g, "_");
    var url_path = url_path.replace("_", "");
    var url_path = url_path.replace("_index.html", "");
    if (-1 !== url_path.match(/^.*apple.*$/)) theFruit = "fruit_apple";
    if (-1 !== url_path.match(/^.*pear.*$/)) theFruit = "fruit_pear";
    if (-1 !== url_path.match(/^.*white.*pear.*$/)) theFruit = "fruit_white_pear";
    if (-1 !== url_path.match(/^.*banana.*$/)) theFruit = "fruit_banana";
    if (-1 !== url_path.match(/^.*banana.*brazil.*$/)) theFruit = "fruit_banana_brazil";
    tagData.tagValue.push({ 
            "tags": [{ "tag": "FRUIT_POPULATE", "value": theFruit }], 
            "isEvent": true, 
            "isTargeting": true })
    }
jQuery(document).ready(function() { 
    findFruits(); 
});

It does work. The problem is even in another page the console only show result the last if statement. So in this case the result FRUIT_POPULATE: fruit_banana_brazil. If I change the last if statement position to another fruits then console still show value from the last if statement.

Question: How to show proper theFruit value from matched url string above?

Thank you

Answer 1

String.prototype.match() returns null , when it fails to match the given regex, and -1 !== null is always true. Try comparing with null instead of -1 . Also, you don't use else if blocks, so the string will go through every if statement.

---

You can actually do this without using any regex at all, since your patterns are not that difficult. String.prototype.includes allows you to check, if a string has the given substring or not.

function findFruits() {
  var url = window.location.pathname
  var theFruit = null

  if (url.includes('/apple_')) {
    theFruit = 'fruit_apple'
  } else if (url.includes('/pear_')) {
    theFruit = 'fruit_pear'
  } else if (url.includes('white_pear')) {
    theFruit = 'fruit_white_pear'
  } else if (url.includes('/banana_')) {
    theFruit = 'fruit_banana'
  } else if (url.includes('/banana_brazil_')) {
    theFruit = 'fruit_banana_brazil'
  }

  // ...
}

If you want to match only the cases, where the fruit comes right after the / character, then add that right before the fruit to restrict the matches accordingly. (Note, if you want to use regex, then you would need to escape the forward slash with a backslash: /^.*\\/apple_.*$/

There is also String.prototype.startsWith and String.prototype.endsWith for flexible querying in javascript strings based on whether the test string matches the beginning or the end of your string.

Answer 2

 var getParams = function (url) { var params = {}; var parser = document.createElement('a'); parser.href = url; var query = parser.search.substring(1); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); params[pair[0]] = decodeURIComponent(pair[1]); } return params; };