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

user_17407887 0
Viewed 119

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!!

javascript regex
3 Answers

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

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

user_73698090

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]]));

user_54249880
Related