Html tag remove using jquery not working properly

Question

I have a string like this:

var str = "x<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">3/2}</span></span></span>+y<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">7/8}</span></span></span>";

From this I want to print x^{3/2}+y^{7/8}

For this I tried like this:

res1=$(str).find('span').contents().unwrap().end().end();


alert(res1.html());

But this gives ^{3/2} only. The x and second part is missing( +y^{7/8} ).

How can I get the required result as x^{3/2}+y^{7/8} .

Please help me...

Answer 1

Just try this...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    var str = 'x<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">3/2}</span></span></span>+y<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">7/8}</span></span></span>';
    jQuery(function(){
        jQuery('#test').html(str).hide();
        alert(jQuery('#test').html());

    });
</script>

<div id="test"></div>

This may help you.

Answer 2

You can just make it a part of temporary div and then use text on it, which will return what you want.

var str = 'x<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">3/2}</span></span></span>+y<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">7/8}</span></span></span>';
console.log($('<div />').html(str).text());

Answer 3

You must escape quotes within quotes of the same type. I just avoid them

DEMO

var str = "x<span>^{<span style='vertical-align: 0em;'><span class='fm-vert fm-frac'>3/2}</span></span></span>+y<span>^{<span style='vertical-align: 0em;'><span class='fm-vert fm-frac'>7/8}</span></span></span>";
alert($('<div />', { html: str }).text());

i also do this sometimes to keep html strings readable:

var str = ["x<span>^{",
              "<span style='vertical-align: 0em;'>",
                  "<span class='fm-vert fm-frac'>3/2}</span>",
              "</span>",
           "</span>",
           "+y<span>^{",
              "<span style='vertical-align: 0em;'>",
                  "<span class='fm-vert fm-frac'>7/8}</span>",
              "</span>",
           "</span>"].join('');

alert($('<div />', { html: str }).text());

Answer 4

Have you tried

str.replace(/<(|\/)spa[^>]*>/g, '');

?

var str = 'x<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">3/2}</span></span></span>+y<span>^{<span style="vertical-align: 0em;"><span class="fm-vert fm-frac">7/8}</span></span></span>';

console.log(str.replace(/<(|\/)span[^>]*>/g, ''));