Get URL value from string in Javascript

Question

I'm trying to figure out how can I extract a URL from the following string in JS.

var str = '[velocity type="youtube" id="239793212" img="http://website.com/wp-content/uploads/image-placeholder.jpg" alt="Play" color="#FFFFFF" bkg_color="transparent"]';

I would like to somehow pull only the http://website.com/wp-content/uploads/image-placeholder.jpg value from this WordPress shortcode which is being read by the WordPress TinyMCE editor.

I should add that the string will not always be in the exact format and the position of img="" will fluctuate.

Is there a way to parse this string as JSON or an array so I can access the value of img?

You should have tagged your question with regex. That would help you to do that. — Rajaprabhu Aravindasamy, Mar 06 '16 at 16:01

Tomalak · Accepted Answer · 2016-03-06T16:10:14.800

/img="([^"]*)"/.exec(str)[1]

In English: Create a regular expression that matches the img part, put the URL in group 1 and after executing the expression on the string, get the contents of group 1.

The expression breaks down as

img="        # the string 'img="'
(            # begin group 1
  [^"]*      #   any character that is not a '"', any number of times
)            # end group 1
"            # the final double quote

Relevant documentation: RegExp.prototype.exec() on the MDN and of course the primary info site on regular expressions: http://www.regular-expressions.info/.

cl3m · Answer 2 · 2016-03-06T16:11:14.500

1

A not so OO way to do it:

var str = '[velocity type="youtube" id="239793212" img="http://website.com/wp-content/uploads/image-placeholder.jpg" alt="Play" color="#FFFFFF" bkg_color="transparent"]';

var url = null;
str.split(' ').forEach(function(s){
  if(s.indexOf('img') > -1) {
    url = s.split("=")[1]
  }
})
// url now contains your url
console.log(url);

Or as a one liner:

var url = str.split(' ').filter(function(s){ return s.indexOf('img') > -1})[0].split("=")[1]

edited Mar 06 '16 at 16:11

answered Mar 06 '16 at 16:03

cl3m

2,761
17
21

Nope, that'd give him `"the url"`. ;) – m02ph3u5 Mar 06 '16 at 16:06
It's not giving you the pure URL. It's enclosed by `"`. You just split by `=` but don't remove the `"`. – m02ph3u5 Mar 06 '16 at 16:14
Oh, I see! Sorry :S Just add a `.replace('"','')` then ;) – cl3m Mar 06 '16 at 16:20

score 0 · Answer 3 · edited Mar 06 '16 at 16:05

0

Your best bet is a Regular Expression.

var regEx= /"http:\/\/.+?"/g; //If you want to extract all urls.
var imgEx= /img=".+?"/g // If you want to extract all img parameters.

edited Mar 06 '16 at 16:05

Rajaprabhu Aravindasamy

64,912
15
96
124

answered Mar 06 '16 at 16:04

GMchris

4,979
4
21
38

Get URL value from string in Javascript

3 Answers3