Problem with Chrome's version causing regex malfunction

Question

Problem with Chrome's version causing regex malfunction

Seeking assistance with extracting a string from a URL of an image using regular expressions and the match() function in JavaScript. The code works flawlessly on Chrome version 62, but encounters issues on older versions like Chrome 58. Here are the specific lines of code causing the problem:

// cloneURL = "/assets/images/bonhommeneige.png"
var cloneName = cloneURL.match('(?<=images/)(.*?)(?=.png)');

While Chrome v. 62 successfully returns "bonhommeneige", Chrome v. 58 displays an error message stating "Invalid regular expression". In need of insights on what might be incorrect with the regular expression pattern.

javascript

Answer 1

Answer №1

Chrome version 58 does not support positive lookbehind. You should modify your regular expression to achieve the desired result without using lookbehind. One alternative is to use a non-capturing group like (?:images/):

var cloneURL = "/assets/images/bonhommeneige.png"
var cloneName = cloneURL.match('(?:images/)(.*?)(?=.png)');

console.log(cloneName);

Answer 2

Chrome version 58 does not support positive lookbehind. You should modify your regular expression to achieve the desired result without using lookbehind. One alternative is to use a non-capturing group like (?:images/):

var cloneURL = "/assets/images/bonhommeneige.png"
var cloneName = cloneURL.match('(?:images/)(.*?)(?=.png)');

console.log(cloneName);

Answer 3

Answer №2

If you need to extract the image file name, here is a useful method you can use:

// Method 1

let imgUrl  = "/assets/pictures/sunset.jpg";
let fileName = imgUrl.substring (
  imgUrl.lastIndexOf("/") + 1,
  imgUrl.lastIndexOf(".")
);

console.log(fileName);

// Method 2

let matches = imgUrl.match(/(?:pictures\/)(\S+)(?:\.jpg)/);

console.log(matches); // Retrieve the [1] element

Answer 4

If you need to extract the image file name, here is a useful method you can use:

// Method 1

let imgUrl  = "/assets/pictures/sunset.jpg";
let fileName = imgUrl.substring (
  imgUrl.lastIndexOf("/") + 1,
  imgUrl.lastIndexOf(".")
);

console.log(fileName);

// Method 2

let matches = imgUrl.match(/(?:pictures\/)(\S+)(?:\.jpg)/);

console.log(matches); // Retrieve the [1] element

Answer 5

Answer №3

To extract the value between the last forward slash / and the last period . (remembering to escape the period with \.) :

imageUrl = "/assets/photos/beach.jpg"

console.log( imageUrl.match(/[^/]+(?=\.)/)[0] )

console.log( imageUrl.match(/([^/]+)\./)[1] )

Answer 6

To extract the value between the last forward slash / and the last period . (remembering to escape the period with \.) :

imageUrl = "/assets/photos/beach.jpg"

console.log( imageUrl.match(/[^/]+(?=\.)/)[0] )

console.log( imageUrl.match(/([^/]+)\./)[1] )

Problem with Chrome's version causing regex malfunction

Answer №1

Answer №2

Answer №3

Similar questions

Tips for converting .WAV files to .MP3 format and streaming audio within a Meteor application

What is the best way to add a checkbox tag in Rails using JavaScript?

Is it possible to transform a webpack configuration into a Next.js configuration?

Tips for securely closing express servers to ensure that ports are properly released

Is there a way to choose multiple dropdown items that share the same header?

The Power of Vue EventBus and Understanding the Lifecycle

Isolating objects within a JSON array based on a single key

Enhancing Three.js interaction with the DOM (using linkify.js)

Store in database and forward to a different web address

`Using Twitter Bootstrap in mobile app development with javascript`

RxJS Observables trigger the onCompleted function after completing a series of asynchronous actions

Dynamically showcase dropdown menus within a single component

Prevent submission of form by disabling button until modifications are made to the original data in Vue.js

Issues have been encountered with the correct functioning of reactive form validation in Angular 6

Is it possible for one function to alter the local variable of another function?

Retrieve the URL using a jQuery request in the P&G RFC

Error 400: Invalid Request: Issue encountered when swapping code for Asana access token using Next.js

Launching in an Angular reactive form

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

What is the process for generating a comprehensive HTML table using AngularJS?