How to return id from string JavaScript

Question

var str = '<input style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHI6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; cursor: auto; outline: 1px solid blue;" autocomplete="email" class="mat-input-element mat-form-field-autofill-control mat-input-server ng-untouched ng-pristine ng-invalid" matinput="" name="email" required="" id="mat-input-112621" placeholder="E-mail Address" aria-invalid="false" aria-required="true" value="" type="email">'

how do i return id="mat-input-112621" from this string, all that html code will be a string so just trying to return the id.

Any specific rules this string follows? Is the id always in the same place, then do var id = str.substring(591, 608);. Otherwise you may use a regex, or a simple search. It all depends on what the rest of the string may be. This question doesn't contain enough detail to answer it properly. — GolezTrol
– GolezTrol, Commented Jun 23, 2018 at 23:52
@GolezTrol: then why not just var id = 'mat-input-112621'? — Scott Sauyet
– Scott Sauyet, Commented Jun 23, 2018 at 23:53

Asons · Accepted Answer · 2018-06-24 00:16:02Z

2

You could create an element, insert the string into it and then ask for the first child's id

Note, if the string will hold more than one HTML element, which as well has an id, you will need to adjust this solution accordingly.

var str = '<input style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHI6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; cursor: auto; outline: 1px solid blue;" autocomplete="email" class="mat-input-element mat-form-field-autofill-control mat-input-server ng-untouched ng-pristine ng-invalid" matinput="" name="email" required="" id="mat-input-112621" placeholder="E-mail Address" aria-invalid="false" aria-required="true" value="" type="email">'

var el = document.createElement('div');
el.innerHTML = str;
console.log(el.children[0].id);

edited Jun 24, 2018 at 0:16

answered Jun 23, 2018 at 23:53

Asons

87.7k12 gold badges119 silver badges175 bronze badges

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

14 Comments

Medet Tleukabiluly Over a year ago

Suggest using el.children[0].attributes.id as it actually returns id="mat-input-112621", also this is easily to read for future modifications (different props)

GolezTrol Over a year ago

Assuming the string will always contain one element, or at least the desired element as a first element. Op specified nothing, and this answer is just a guess.

Asons Over a year ago

@GolezTrol How can this be a guess, the OP presented a string which this solves. If they add that it can be more than one element in the given string, then an adjustment will be needed, but not before.

GolezTrol Over a year ago

There can always be some weird edge cases that are not covered, but this question is completely without specifications. I fail to see why two high rep users take stabs at the answer instead of closing the question or at least asking for clarification. This Q&A will hardly be useful for OP and not at all for anyone else.

Medet Tleukabiluly Over a year ago

Moral of story - don't hurry, as tomorrow OP can change the question, and your answer with bunch of upvotes won't be valid anymore, anyway you got my +1 for equilibrium

|

Scott Sauyet · Accepted Answer · 2018-06-24 00:00:30Z

0

You could use a simple regex.

If it's guaranteed to be there, then this might do:

var str = '<input style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHI6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; cursor: auto; outline: 1px solid blue;" autocomplete="email" class="mat-input-element mat-form-field-autofill-control mat-input-server ng-untouched ng-pristine ng-invalid" matinput="" name="email" required="" id="mat-input-112621" placeholder="E-mail Address" aria-invalid="false" aria-required="true" value="" type="email">';

console.log(str.match(/\b\id="([^"]+)"/)[1])

If not, you might have to check whether the match exists before taking its first group.

answered Jun 24, 2018 at 0:00

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

2 Comments

Medet Tleukabiluly Over a year ago

Regexing html terrible idea tho

Scott Sauyet Over a year ago

Oh, of course, as a general parsing technique. (And yes, I know the classic SO post about that; it's one of my favorites.) But for specific tasks, it can work fine. My guess, although I'm not sure, is that the syntax for a single element is a regular language.

Collectives™ on Stack Overflow

How to return id from string JavaScript

2 Answers 2

14 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related