How to get the value from a string using javascript

Question

I have a string like follows in javascript

var str='<img class="avatar  avatar-small 012345" src="/img/staff_avatar_profile.jpg" />&nbsp; olah blah';

I need to get every time the number like for this example 012345. Which will be ofcourse be different in different scenario and I also need to get the text olah blah which will be also different in different scenario.

I have the above string in a variable. ;)

How can i perform this in a efficient manner in java-script

[What have you tried](http://mattgemmell.com/2008/12/08/what-have-you-tried/)? — Joseph Silber, Sep 13 '13 at 14:14
a class identifier can not be numeric as described at http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors. So no framework/library would work here if its not doing wrong behaivours. Use substring or regex instead, when you always know the characters before and behind the number. — Dennis Ziolkowski, Sep 13 '13 at 14:17
@tymeJV he did say, "I have a string like follows in javascript" please explain how this is possible without a variable — rorypicko, Sep 13 '13 at 14:17

Joseph Silber · Answer 1 · 2013-09-13T14:24:28.793

2

The best way to parse HTML in a browser is to let the browser do it for you:

var div = document.createElement('div');
div.innerHTML = str;
var numbers = div.getElementsByTagName('img')[0].className.match(/ (\d+)/)[1];

Here's the fiddle: http://jsfiddle.net/CGuLC/1/

edited Sep 13 '13 at 14:24

answered Sep 13 '13 at 14:18

Joseph Silber

205,539
55
352
286

1

Its nice but very fragile if i have other numbers also sometimes in my string – Saurabh Kumar Sep 13 '13 at 14:20
@SaurabhKumar - the regex will only match the first set of number it can find. – Joseph Silber Sep 13 '13 at 14:24

score 0 · Answer 2 · answered Sep 13 '13 at 14:16

0

Use the data attribute instead of class.

<img class="avatar  avatar-small" data-id="012345" src="/img/staff_avatar_profile.jpg" />

Then use jQuery to get the data attribute.

jQuery('.avatar').data('id');

Sources: http://html5doctor.com/html5-custom-data-attributes/ http://api.jquery.com/data/

answered Sep 13 '13 at 14:16

CharliePrynn

2,924
5
37
66

1

he has string not html image – Charaf JRA Sep 13 '13 at 14:17
1

And also didn't mention jQuery anywhere – rorypicko Sep 13 '13 at 14:17
It doesn't matter if its a string or an element. He can still create a html element in jQuery and then access the data attribute that way. – CharliePrynn Sep 13 '13 at 14:23
@CharliePrynn yes ,that's the reason why i told him this , because i was trying to convert string to dom element.The difference between me and you is that i tried to parse string without div , can you tell me why ? – Charaf JRA Sep 13 '13 at 14:39
I'm not sure I undertand what you mean @FaceOfJock. – CharliePrynn Sep 13 '13 at 14:54
why not var div = document.createElement(' – Charaf JRA Sep 13 '13 at 14:56

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

You could use jQuery if it works there to get an only numeric class name. Take a look at jQuery - selectors on a html string to get a clue.

edited May 23 '17 at 12:20

Community

1
1

answered Sep 13 '13 at 14:21

Dennis Ziolkowski

727
6
13

I like this the best. When I do $(myString).find('.user').text()..it returns me nothing.... – Saurabh Kumar Sep 13 '13 at 14:46
@SaurabhKumar, then please check this answer as useful :) – Dennis Ziolkowski Sep 13 '13 at 16:23

score 0 · Answer 4 · answered Sep 13 '13 at 14:22

If you need to store data for an element, one good way to achieve that is to use the data-key attribute with jQuery:

$('.avatar').data('number', '012345'); // set value
var number = $('.avatar').data('number'); // get value

The rendered markup will look like this:

<img class="avatar  avatar-small" data-number="012345" src="/img/staff_avatar_profile.jpg" />

How to get the value from a string using javascript

4 Answers4