CODEWITHSUNDEEP
javascript
avazwij
avazwij

Reputation: 91

how to get specific values from string?

I am getting a variable which value always follows this format:

"<div>
    &nbsp;</div>
<div>
    <span style="font-family:tahoma,geneva,sans-serif;"><span>VALUE 1</span></span></div>
<div>
    <strong><span style="font-family:tahoma,geneva,sans-serif;">VALUE 2</span></strong></div>
<div>
    <span style="font-family:tahoma,geneva,sans-serif;"> </span>VALUE 3</div>
"

How can I get VALUE 1, VALUE 2 and VALUE 3 using JavaScript (not jQuery or other libs)?

NB:

in Console, I get those values (I call them b) typeof(b) returns string

Upvotes: 0

Views: 105

Answers (4)

Mirko Conti
Mirko Conti

Reputation: 618

Update:

If the input is a valid HTML string you could parse with this trick (not jQuery or other libs):

var your_string = `<div>&nbsp;</div><div><span style="font family:tahoma,geneva,sans-serif;"><span>VALUE 1</span>fgfgfg</span></div><div><strong><span style="font-family:tahoma,geneva,sans-serif;">VALUE 2</span></strong></div><div><span style="font-family:tahoma,geneva,sans-serif;">  </span>VALUE 3</div>`

var obj_evaluator = document.createElement("div");
obj_evaluator.innerHTML = your_string;
// get the list of div 
var list_div = obj_evaluator.getElementsByTagName('div');
var value1 = (list_div[1].firstChild.firstChild.textContent);  //value 1
var value2 = (list_div[2].firstChild.firstChild.textContent);  //value 2
var value3 = (list_div[3].lastChild.textContent);  //value 3
// create an array
var result = [value1,value2,value3]
// print result
console.log(result);

Old answer (wrong because of the VALUE 3,but if all the VALUE are inside the 'span' then this is the right answer! ): 

var obj_evaluator = document.createElement("div");
obj_evaluator.innerHTML = your_string;
// debug row
console.log(obj_evaluator);
var list_span = obj_evaluator.getElementsByTagName('span');
for (var i = 0; i < list_span.length; i++) {
    console.log(list_span[i].innerHTML);
    // here you can print other info of the node
}

Upvotes: 1

Rayon
Rayon

Reputation: 36609

Use Array#map and then Array#filter

innerHTML the string to a temp element and use DOM-api to manipulate data.

Use 'span[style]' selector to get only those span elements having style attribute.

var str = '<div>\
  &nbsp;</div>\
<div>\
  <span style="font-family:tahoma,geneva,sans-serif;"><span>VALUE 1</span></span>\
</div>\
<div>\
  <strong><span style="font-family:tahoma,geneva,sans-serif;">VALUE 2</span></strong></div>\
<div>\
  <span style="font-family:tahoma,geneva,sans-serif;">VALUE 3</span></div>';
var div = document.createElement('div');
div.innerHTML = str;
var spanElems = div.querySelectorAll('span[style]');
var spans = [].map.call(spanElems, function(el) {
  return el.textContent.trim();
}).filter(Boolean);
console.log(spans);

Upvotes: 2

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

The most simplest way using jQuery. 

var a = '<div>\
    &nbsp;</div>\
<div>\
    <span style="font-family:tahoma,geneva,sans-serif;"><span>VALUE 1</span></span></div>\
<div>\
    <strong><span style="font-family:tahoma,geneva,sans-serif;">VALUE 2</span></strong></div>\
<div>\
    <span style="font-family:tahoma,geneva,sans-serif;">au </span>VALUE 3</div>'

var HTML = $.parseHTML(a)
var val1 = $(HTML[1]).find('span span').text()
var val2 = $(HTML[2]).find('span').text()
$(HTML[3]).find('span').remove()
var val3 = $(HTML[3]).text()
console.log(val1, val2, val3)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 3

Howzieky
Howzieky

Reputation: 829

You can save the string as a variable, and then use htmlString.match(/VALUE \d+/gmi)

Upvotes: 1

Related Questions