CODEWITHSUNDEEP
jqueryregexstringreplacematch
Aariba
Aariba

Reputation: 1194

Two strings by same match() method in JavaScript

My question is, how I match two strings by same match () Method, example given below:
Original code:

var self = $(this);
var src = self.attr('src');    
if (src.match(/category/image.jpeg)) {
    self.attr('src', src.replace("/category/","/categories/"));
}

I want to match two strings like this:

var self = $(this);
var src = self.attr('src');    
if (src.match(/category/image.jpeg, /category/image.png)) {
    self.attr('src', src.replace("/category/","/categories/"));
}

So, I made change like this if (src.match(/category/image.jpeg, /category/image.png))

But not working, I think it's wrong, but how to match two different strings by same Method? By my given code.

Upvotes: 2

Views: 95

Answers (5)

Yamato Hikawa
Yamato Hikawa

Reputation: 21

HTML

<img src="category.image.jpeg">
<img src="category.image.png">
<img src="category.image.gif">

JS

var $img = $('img'),
  baseStr = 'category.image',
  ext = ['.jpeg', '.png'],
  aryMatchStr = $.map(ext, function(item) {
    return baseStr + item;
  });

$.map($img, function(item, index) {
  var $item = $(item),
    src = $item.attr('src');

    for(var i = 0, len = aryMatchStr.length; i < len; i++){
      if(src.match(aryMatchStr[i])){
        $item.attr('src', src.replace(/category/, 'categories'));
      }
    }
});

Result

<img src="categories.image.jpeg">
<img src="categories.image.png">
<img src="category.image.gif">

Upvotes: 1

Sindhoo Oad
Sindhoo Oad

Reputation: 1194

try this NOTE: this is with quotes 

if(src.match('/category/image.jgep') || src.match( '/category/image.png')) {
    self.attr('src', src.replace("/category/","/categories/"));
}

Upvotes: 1

Miguel
Miguel

Reputation: 20633

Here's the regex you need 

 /category(\/image\.(?:jpe?g|png))/gi

Regex101 Demo: https://regex101.com/r/eN6gW1/1

Example

var regex = /category(\/image\.(?:jpe?g|png))/gi;

var self = $(this);
var src = self.attr('src');    
self.attr('src', src.replace(regex, 'categories$1'));

JSFiddle Demo: https://jsfiddle.net/qjyukz4c/4/

Upvotes: 1

Tushar
Tushar

Reputation: 87203

.match(/category/image.jgep) is not a valid syntax to use RegEx with String#match and will throw syntax error.

To check if the string contains .jpeg or .png images, you can use

/category\/image\.(?:jpeg|png)$/

Use RegExp#test instead of String#match to check if the string follows the pattern.

Code:

var regex = /category\/image\.(?:jpeg|png)$/i;
if (regex.test('src')) {
    self.attr('src', src.replace("/category/","/categories/"));
}

To replace /category/ for all the images, you can use attribute contains selector with attr() with callback.

$('img[src*="/category/"]').attr('src', function(ind, oldSrc) {
    return oldSrc.replace("/category/", "/categories/");
});

Upvotes: 1

B. Aikey
B. Aikey

Reputation: 239

I believe what you are wanting is a regex that matches any png or jpeg file in the category directory, in which case this would be the regex you would want to use:

/\/category\/.*\.(jpeg|png)/

And in code:

var self = $(this);
var src = self.attr('src');    
if (src.match(/\/category\/.*\.(jpeg|png)/)) {
    self.attr('src', src.replace("/category/","/categories/"));
}

Upvotes: 1

Related Questions