1

I have this piece of HTML code as a string stored in a variable.

<p style="text-align: center;">
    <span style="font-size: small;font-family: comic sans ms', sans-serif;">
        <strong>
            word1&nbsp;
            <span style="line-height: 1.5;">
                word2&nbsp;
            </span>
            <span style="line-height: 1.5;">
                word3&nbsp;
            </span>
            <span style="line-height:1.5;"></span>
        </strong>
    </span>
</p>

I want only to extract word1&nbsp;, word2&nbsp; and word3&nbsp;. How can I do it in an easiest and time efficient way?

I was thinking the character > that was not preceded immediately by < can be a index where I can start extracting my data.

  • It's not quite regex, but `document.querySelector('p').innerText.split(' ')` will extract the information, more or less. – litel May 04 '16 at 06:50
  • @litel --> The HTML Code above was a string stored in a variable. How will I do it in my case? –  May 04 '16 at 06:55
  • What language are you extracting the variable from? How are you getting the variable? – litel May 04 '16 at 06:57
  • The string was stored in the database for some reasons. –  May 04 '16 at 06:58

5 Answers5

1

Try something like this:

var html = '<p style="text-align: center;">
    <span style="font-size: small;font-family: comic sans ms, sans-serif;">
        <strong>
            alyssa&nbsp;
            <span style="line-height: 1.5;">
                enganio&nbsp;
            </span>
            <span style="line-height: 1.5;">
                gono&nbsp;
            </span>
            <span style="line-height:1.5;"></span>
        </strong>
    </span>
</p>';
    var values = $(html).find('p strong').text().split(' ');

or

var v =[];
v.push($(html).find('p strong').clone().find('span').remove().end().text());
$(html).find('p strong span').each(function(i,val) {
if($.trim($(val).text()).length>0)
v.push($(val).text())
});
console.log(v);
madalinivascu
  • 32,064
  • 4
  • 39
  • 55
  • The HTML Code above was a string stored in a variable. How will I do it in my case? –  May 04 '16 at 06:52
  • 1
    Assuming code is in myhtml variable, just replace $('p strong') with $(myhtml).find('p strong') and $('p strong span') with $(myhtml).find('p strong span'). (has now been fixed in the reply) – Adder May 04 '16 at 07:01
1

Using jQuery you can fetch easily

lets try this one:-

$('p').text();

it will return the combined text contents of each element in the set of matched elements, including their descendants, or also used to set the text contents of the matched elements.

Pawan Kashyap
  • 146
  • 4
  • The HTML Code above was a string stored in a variable. How will I do it in my case? –  May 04 '16 at 06:51
  • You can add that code in some where in Div and set display property "none" and do like $('p').text().trim().split("\xa0"); – Pawan Kashyap May 04 '16 at 09:09
1

Since you used regex tag I will post a solution with regex.

var re = /\w+&nbsp;/g;
var results = html.match(re);

Then you can access the results from "results" array.

memo
  • 273
  • 2
  • 15
0

Just use this, it will return you all text inside p tag - "alyssa&nbsp; , enganio&nbsp; , gono&nbsp;":

alert($("p").text());
Dhara Parmar
  • 8,021
  • 1
  • 16
  • 27
  • The HTML Code above was a string stored in a variable. How will I do it in my case? –  May 04 '16 at 06:51
  • 1
    add that html in hidden div in page, process above line and as you get result just remove that hidden div – Dhara Parmar May 04 '16 at 06:53
  • ok then after getting 'alyssa enganio gono' you can just split them using string.split(" "). and you can get them seperated – Dhara Parmar May 04 '16 at 07:24
  • No I have to preserved the blank spaces within the span, because it's part of the text format. –  May 04 '16 at 07:28
0

I think you want fetch text of tag without text of children.

So just see this thread

This code:

 console.log($("strong").clone().children().remove().end().text());

And to changing a string to jQuery object see this thread

This code:

var element = $('<div id="a1"></div><div id="a3"></div>');
Community
  • 1
  • 1
amirpaia
  • 366
  • 2
  • 9