Extract an ID value from a string with JavaScript

Question

IN a JavaScript Event I only have access to a string in this format below...

var innerHTML = '<img src="https://avatars3.githubusercontent.com/u/7988569?v=3&amp;s=40"
class="item-image picker-item-thumb"><i id="2">Item 2</i>';

I need to extract the ID value from this part  so I would have 2 in a variable.

Also none of the other HTML tags will ever have an ID besides the 

I'm not sure how to do this?

Parse the HTML to DOM elements, find the i element and access its id property. — Felix Kling
– Felix Kling, Commented Oct 29, 2015 at 0:15
Convert it to DOM elements by assigning it to the innerHTML of a DocumentFragment. Then use DOM methods to access the elements and attributes. — Barmar
– Barmar, Commented Oct 29, 2015 at 0:15
It's even easier if you use jQuery: $("<div>", {html: innerHTML}).find("i").attr("id") — Barmar
– Barmar, Commented Oct 29, 2015 at 0:16
Why is your HTML a String in the first place? It's just Element.id in JavaScript if you're working on the DOM. — StackSlave
– StackSlave, Commented Oct 29, 2015 at 0:17
if you are using jQuery can use $(innerHTML).filter('i')[0].id; — charlietfl
– charlietfl, Commented Oct 29, 2015 at 0:32

aarjithn · Accepted Answer · 2015-10-29 00:56:06Z

2

Use regex capturing group.

If the id is always numeric, use:

/<i id="(\d+)"/.exec(innerHTML)[1]

Else, you can use

/<i id="([^"]+)"/.exec(innerHTML)[1]

Suggest to look at the comments for further information!

edited Oct 29, 2015 at 0:56

answered Oct 29, 2015 at 0:23

aarjithn

1,19110 silver badges20 bronze badges

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

8 Comments

Felix Kling Over a year ago

That would return foo" bar="baz for .

aarjithn Over a year ago

@FelixKling Well the question is specifically for the format , but yeah. Need to keep in mind.

Roko C. Buljan Over a year ago

@aarjithn 1. Fix InnerHTML to innerHTML. Better use /<i id="(\d+)"/.exec(innerHTML)[1] quite fine for numerical ID

Roko C. Buljan Over a year ago

@aarjithn this is the issue Felix pointed out - jsbin.com/lodebu/2/edit?html,css,js,console,output - where (\d+) prevents it. Though worth noting that Error will be thrown using your examples if an Alpha character is used as ID.

Felix Kling Over a year ago

@aarjithn: Simpler would be [^"]+ :)

|

Nishanth Matha · Accepted Answer · 2015-10-29 00:37:13Z

0

You can use regex to do it:

(?<=i id=").+(?=")

As pointed by felix king you can try the following as javascript doesn't support lookbehinds:

/i id="(.+)"/

var innerHTML = '<img src="https://avatars3.githubusercontent.com/u/7988569?v=3&amp;s=40"
class="item-image picker-item-thumb"><i id="2">Item 2</i>';
var arr = innerHTML.match(/i id="(.+)"/)[1];
alert(arr);

arr will have all the matches.

edited Oct 29, 2015 at 0:37

answered Oct 29, 2015 at 0:20

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

4 Comments

Felix Kling Over a year ago

JavaScript doesn't support lookbehinds

Felix Kling Over a year ago

Uncaught SyntaxError: Invalid regular expression: /(?<=i id=").+(?=")/: Invalid group(…).

Roko C. Buljan Over a year ago

@NishanthMatha (.+)" might fail if user adds another attribute to the  element - since .+ will match any character > since the last occurrence of ". (\S+) is a somewhat better solution

Felix Kling Over a year ago

Now it's the same solution as aarjithn's with the same initial issues. Have a look at the comments on that answer.

Collectives™ on Stack Overflow

Extract an ID value from a string with JavaScript

2 Answers 2

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related