How to get "tag name", "attribute name", "attribute value" in regex?

Question

I'm trying to write a regular expression that needs to return every tag name, attribute name, and attribute value

Here is the code example

Hello, My name is Jack, This is my selfie:
[img id='4' src="imageurl"]
Below is the quick-link to my profile
[profile username='jackisbest']

I need to get any text enclosed in [ ]

Also I need javascript regex to parse them and match them this way

> Match 1: img

> Match 2: id='4'
  Group 1: id
  Group 2: 4

> Match 3: src="imageurl"
  Group 1: src
  Group 2: imageurl

This is the regex I am using, but it can only match attributes and value

(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']

Thanks!!

What about \[([a-zA-Z]+)|(\S+)=(["'])(.*?)\3?

Wiktor Stribiżew
– Wiktor Stribiżew

2022-02-10 09:48:47 +00:00
Commented Feb 10, 2022 at 9:48 — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Feb 10, 2022 at 9:48

Wiktor Stribiżew · Accepted Answer · 2022-02-10 10:29:14Z

2

You can use

/\[([a-zA-Z]\w*)|([^=\s]+)=["'](.*?)["']/g

See the regex demo. Details:

\[([a-zA-Z]\w*) - a [ char and then a letter followed with zero or more word chars (letters, digits, underscores)
| or
([^=\s]+) - one or more chars other than = and whitespace
= - a = char
["'](.*?)["'] - " or ', then any zero or more chars as few as possible (captured into Group 3), and then a " or ' char.

answered Feb 10, 2022 at 10:29

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

Comments

anotherGatsby · Accepted Answer · 2022-02-10 06:05:13Z

0

I modified your regex to catch the tag name and used named capture groups.

/\[?(?<tagName>\w+)\s?(?<attName>\S+)=['"]?(?<attValue>(?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']/gm

This might work for you.

Test here: https://regex101.com/r/kT7pG4/1

answered Feb 10, 2022 at 6:05

anotherGatsby

1,59811 silver badges21 bronze badges

1 Comment

Yuhan Chen Over a year ago

I found that the label name will be repeated, this is not good for me but I have solved the problem, the regex is as follows \[([a-zA-Z]+)|(\S+)=["'](.* ?)["'] Test here

The fourth bird · Accepted Answer · 2022-02-10 12:28:42Z

If you want to take the opening [ and the closing ] into account and the quantifier in the lookbehind is supported, you can use:

(?<=\[(\w+\b)[^\][\n]*)([^\s=]+)=['"]([^'"]*)['"](?=[^\][\n]*])

(?<= Positive lookbehind to assert what is on the left is
- \[ Match [
- (\w+\b) Capture group 1, match 1+ word characters
- [^\][\n]* Optionally match any char except [ ] or a newline
) Close the lookbehind
([^\s=]+)=['"]([^'"]*)['"] Capture group 2 and group 3 for the key and value
(?=[^\][\n]*]) Assert a ] to the right

Regex demo

The pattern has in group 1 the value of the value right after the opening [ and group 2 and group 3 are the values of the key and value pairs:

const regex = /(?<=\[(\w+\b)[^\][\n]*)([^\s=]+)=['"]([^'"]*)['"](?=[^\][\n]*])/g;
const str = `Hello, My name is Jack, This is my selfie:
[img id='4' src="imageurl"]
Below is the quick-link to my profile
[profile username='jackisbest' a='b']`;
let m;

console.log(Array.from(str.matchAll(regex), m => [m[1], m[2], m[3]]));

Collectives™ on Stack Overflow

How to get "tag name", "attribute name", "attribute value" in regex?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related