How to get id of a javascript variable which is html form

Question

I have a javascript variable which is returning as below;

var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'

I want to get the id(GRID_7_2_1_1_e_4) of this html.

Could you help me?

is this fixed? if yes, then take substring from `html[10]` to `html[25]`. otherwise provide more information... — Abhinav Gauniyal, Aug 01 '17 at 07:06
You can create a in-memory element and use it to get `id` attribute or you can do string manipulation. Either way, your question is missing problem statement. What you have shared is a requirement and not a problem — Rajesh, Aug 01 '17 at 07:08
@Arat Your question is incomplete. Any answer you will get will be based on assumptions. So I'd request you to add necessary details. — Rajesh, Aug 01 '17 at 07:11
@Rajesh I just want to get the ID value GRID_7_2_1_1_e_4 and this id may come as dynamic( I mean it may change). And I don't want jquery here I want to use only javascript. — Passionate developer, Aug 01 '17 at 07:16
@Arat I accept it, but *I just want to get the ID* is a **requirement** and not a problem. Have you tried anything? Are you stuck somewhere? If yes, sharing necessary code will answer many assumption people are making — Rajesh, Aug 01 '17 at 07:18
@Rajesh I have some *div* with same id and when I want to focus out from any of the div, I want to perform some action on this div, for this I want to get the id, so that I can perform the action. — Passionate developer, Aug 01 '17 at 07:22
@Arat I'm iterating myself the last time. **I want** is a requirement and not a **problem statement**. So unless you show us **your effort**, we will not put effort in solving your problem. — Rajesh, Aug 01 '17 at 07:26

score 0 · Answer 1 · answered Aug 01 '17 at 07:09

0

It can be done with javascript regexp:

var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">';
var regex = /id="([^"]*)"/g;
var matches = regex.exec(html);

console.log(matches);

answered Aug 01 '17 at 07:09

Val

21,938
10
68
86

1

don't parse html with regex its generally a bad idea – Lime Aug 01 '17 at 07:11
I can't see any bad if I only need id from pure string. better than pollute the DOM. – Val Aug 01 '17 at 07:13
@William is correct. Parsing HTML string with regex is an ugly way. It will work in this case but will be very limited. What id there is a attribute `data-id="123"`? – Rajesh Aug 01 '17 at 07:16
@Rajesh thanks and yes it won't work with `data-id="123"`. do you have a better idea? my thought is that to pollute DOM tree and object id hash table is much worse. Since it's not even in the tree, just string. – Val Aug 01 '17 at 07:20
1

@Val Unless you append an element to some other element, it will not be added to DOM tree. So an in-memory element will be destroyed as soon as its scope runs out. Also to answer *do you have a better idea*, I have already commented it under question. Would have answered but the question is unclear and does not shows any effort. So this is a requirement and my boss has already given me enough to work on. ;-) So not answering. – Rajesh Aug 01 '17 at 07:23

score 0 · Answer 2 · answered Aug 01 '17 at 07:09

0

Do you have jQuery running in your app?

If so, than you can use:

var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
var id = $(html).attr('id');

answered Aug 01 '17 at 07:09

Mike Bovenlander

5,236
5
28
47

@Rajesh I know, but since the question isn't to explanatory itself I asked: "Do you have jQuery running in your app?" – Mike Bovenlander Aug 01 '17 at 07:11
1

*but since the question isn't to explanatory itself* asks for a close vote. If you do not have that privilege, a comment should be enough. Answering a partial question can attract unwanted votes/comments as there is a possibility that your assumptions are incorrect. – Rajesh Aug 01 '17 at 07:13
I do't want jquery – Passionate developer Aug 01 '17 at 07:14

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Assuming you don't have jQuery, you can try this approach:

Idea:

Create an in-memory element and set your HTML string as its innerHTML.
Then navigate to necessary child in this element and fetch required attribute.

Note: This approach will only work if the supplied HTML string is valid. Also note that id should be unique. So if there are multiple elements with same id, first element will be fetched.

Sample

var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'

var div = document.createElement('div');
div.innerHTML = html;
var id = div.firstChild.id;
// or 
// var id = div.firstChild.getAttribute('id')

console.log(id);

// This should return `null` as `div` is an in-memory element and will not be a part of DOM tree
console.log(document.getElementById('GRID_7_2_1_1_e_4'))

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 01 '17 at 07:10

Lime

13,400
11
56
88

1

this is answered here https://stackoverflow.com/questions/2522422/converting-a-javascript-string-to-a-html-object – Pradeep Aug 01 '17 at 07:36
1

I have wrapped you code in snippet and added some explanation as we are answering for readers. Also added a caveat if HTML String is not correct. If you think there is something incorrect or needs to be pointed out, you can update the answer. – Rajesh Aug 01 '17 at 07:36
@Pradeep Nice one. I guess you can flag question as dupe. – Rajesh Aug 01 '17 at 07:37

Akash Deep Sharma · Answer 4 · 2017-08-01T07:31:04.967

0

Check this, this is exact answer to your question using only html and javascript

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
  function myFunction() {

    var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
    var test = html.match(/id="(.*)" /);
    alert (test[1]);
}



</script>

</body>
</html>

edited Aug 01 '17 at 07:31

answered Aug 01 '17 at 07:16

Akash Deep Sharma

29
7

@Arat: I have edited the code by adding html also, simply copy paste this code in text file and save it as .html extension. Open in google chrome and you can verify it. I have just verified that. You can see the screenshot I added below my solution. – Akash Deep Sharma Aug 01 '17 at 07:28
Please notice `<>` icon in editor. You can paste your HTML/CSS/JS code in it and make it executable. – Rajesh Aug 01 '17 at 07:35

Chinmay Dalvi · Answer 5 · 2017-08-01T18:33:36.133

I Assume that you are not using the jQuery then in this case you can use DOM Praser. In this case I am using the Object of DOM Parser and then i am using it to convert the string into HTML element. and after converting it. I am finding the id of the element by firstchilid.id assuming that span is your first element

var htmlString = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
parser = new DOMParser();
doc = parser.parseFromString(htmlString, "text/xml");
console.log(doc.firstChild.id);

How to get id of a javascript variable which is html form

5 Answers5

Idea: