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
– Rajaprabhu Aravindasamy, Commented Mar 6, 2016 at 16:01

Tomalak · Accepted Answer · 2016-03-06 16:10:14Z

4

/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/.

edited Mar 6, 2016 at 16:10

answered Mar 6, 2016 at 16:04

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cl3m · Accepted Answer · 2016-03-06 16:11:14Z

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 6, 2016 at 16:11

answered Mar 6, 2016 at 16:03

cl3m

2,80121 silver badges21 bronze badges

3 Comments

m02ph3u5 Over a year ago

Nope, that'd give him "the url". ;)

m02ph3u5 Over a year ago

It's not giving you the pure URL. It's enclosed by ". You just split by = but don't remove the ".

cl3m Over a year ago

Oh, I see! Sorry :S Just add a .replace('"','') then ;)

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-06 16:05:57Z

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 6, 2016 at 16:05

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Mar 6, 2016 at 16:04

GMchris

5,7064 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

Get URL value from string in Javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related