Regex parsing in javascript

Question

Can you help how to parse the regex i have tried a lot but not able to do.

Input : <a onclick="javascript:collapse('displayText','hideText','whyInfo-arrow-image')"><span sd:text="${whyInfoLabel}">Learn more about Authentication</span> <img id="whyInfo-arrow-image" sd:src="${downwardArrowImage}" height="20" width="20" >

Expected : sd:text="${whyInfoLabel}" and sd:src="${downwardArrowImage}"

My attempt 1 : "/\$\{(\w*)\}/g" it can pick only {whyInfoLabel} & {downwardArrowImage}

My attempt 2 : "/sd.*\$\{(\w*)\}/g" this is not able to split.

I am very new to Regex and to JavaScript.

Any help will be great.

This is one of the famous type questions, unfortunately... stackoverflow.com/questions/1732348/… — Katana314
– Katana314, Commented Oct 18, 2018 at 13:01
You're in JS, why don't you use the DOM to parse HTML instead? — user47589
– user47589, Commented Oct 18, 2018 at 13:02

score 1 · Accepted Answer · 2018-10-18 14:04:48Z

1

You're in JS, why don't you use the DOM to parse HTML instead? Regex isn't designed to parse HTML, but the DOM provides a utility that is designed specifically for that purpose.

If your browser supports it, you should consider doing this using the DOMParser instead:

var html = "<a onclick=\"javascript:collapse('displayText','hideText','whyInfo-arrow-image')\"><span sd:text=\"${whyInfoLabel}\">Learn more about Authentication</span>  <img id=\"whyInfo-arrow-image\" sd:src=\"${downwardArrowImage}\" height=\"20\" width=\"20\" >";

var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");

var attrText = doc.querySelector('span').getAttribute("sd:text");
console.log(attrText);

var attrSrc = doc.querySelector('img').getAttribute("sd:src");
console.log(attrSrc);

"${whyInfoLabel}"
"${downwardArrowImage}"

edited Oct 18, 2018 at 14:04

answered Oct 18, 2018 at 13:37

user47589

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

Comments

rib · Accepted Answer · 2018-10-18 13:09:04Z

0

Try this: /(sd:.*=".*")/Ug

Or this: /\{(.*)\}/Ug

answered Oct 18, 2018 at 13:09

rib

926 bronze badges

Comments

Poul Bak · Accepted Answer · 2018-10-18 13:16:52Z

0

This should give you both results in an array:

/sd:(?:text|src)=\"[^\"]*"/g

The regex matches 'sd:' at start, followed by 'text' or 'src', a equal sign, a double quote followed by zero or more characters not being a double quote, and finally a double quote.

Just call (assuming your text in a variable called 'text':

var regex =/sd:(?:text|src)=\"[^\"]*"/g;
var matches = text.match(regex);
var match0 = matches[0];
var match1 = matches[1];

answered Oct 18, 2018 at 13:16

Poul Bak

11k5 gold badges39 silver badges70 bronze badges

Comments

Alex G · Accepted Answer · 2018-10-18 13:18:26Z

0

You can try this regex. Hope this helps.

const regex = /\w+:\w+="\$\{\w*\}"/g;

const input = '<a onclick="javascript:collapse(' + 'displayText' + ',' + 'hideText' + ','+ 'whyInfo-arrow-image' + ')"><span sd:text="${whyInfoLabel}">Learn more about Authentication</span>  <img id="whyInfo-arrow-image" sd:src="${downwardArrowImage}" height="20" width="20" >';

console.log(input.match(regex))

answered Oct 18, 2018 at 13:18

Alex G

1,9172 gold badges12 silver badges15 bronze badges

Comments

Sven Liivak · Accepted Answer · 2018-10-18 13:30:34Z

0

asdf = new RegExp('(sd:.+?[}])+', 'gi');
console.log(str.match(asdf));

answered Oct 18, 2018 at 13:30

Sven Liivak

1,41311 silver badges11 bronze badges

Comments

Andre Elrico · Accepted Answer · 2018-10-18 13:37:28Z

0

more general:

(?<=["\s])[^\s]+?\s?=\s?"\$\{(?:\w*)\}"

REGEX 101

answered Oct 18, 2018 at 13:37

Andre Elrico

11.6k8 gold badges56 silver badges78 bronze badges

Collectives™ on Stack Overflow

Regex parsing in javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related