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

This `-1 !== val.match(....)` will always be `true` because `.match` will never return `-1`. — Titus, Jun 24 '19 at 10:02

Lajos Mészáros · Accepted Answer · 2019-06-24T09:59:46.440

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.

score 0 · Answer 2 · answered Jun 24 '19 at 09:50

0

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;
};

answered Jun 24 '19 at 09:50

Moo

87
6

This will parse the query sting, the OP wants to check if the path matches something. – Titus Jun 24 '19 at 09:59

get value from URL string in JavaScript with regex

2 Answers2