Parse HTML from a textarea using jquery

Question

I would like to parse some html content from a textarea and get a value from a selected tag using jquery. I tried the below code but no hope.

var a = $('#a').val();
 var dom_nodes = $($.parseHTML(a));
 alert(dom_nodes.find('#ae').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<textarea id="a">
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <b:if cond='data:skin.vars.body_background.image and data:features.responsiveBackgrounds' id='ae'>
      <b:with value='&quot;body&quot;' var='selector'>
        <b:include cond='not data:view.isPreview' data='skin.vars.body_background.image' name='responsiveImageStyle'/>
      </b:with>
    </b:if>
    </html>  
</textarea>

The error clearly indicates that you did not include the jQuery library. — PeterKA
– PeterKA, Commented Aug 13, 2017 at 18:56
That looks remarkably like XML, not HTML... the <?xml is the first clue... — fdomn-m
– fdomn-m, Commented Aug 13, 2017 at 19:57

Ashan · Accepted Answer · 2017-08-13 19:09:37Z

1

Use parseXML instead.

var a = $('#a').val();
var dom_nodes = $($.parseXML(a));
alert(dom_nodes.find('#ae').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<textarea id="a">
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <b:if cond='data:skin.vars.body_background.image and data:features.responsiveBackgrounds' id='ae'>
      <b:with value='&quot;body&quot;' var='selector'>
        <b:include cond='not data:view.isPreview' data='skin.vars.body_background.image' name='responsiveImageStyle'/>
      </b:with>
    </b:if>
    </html>  
</textarea>

edited Aug 13, 2017 at 19:09

Ashan

19.7k5 gold badges53 silver badges69 bronze badges

answered Aug 13, 2017 at 19:03

Poootaatoooo

3161 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Redmond Seyer Over a year ago

for this sample code..the above solution works fine...but I'm dealing with lots of code that comes under the textbox. In that case it shows none :(

Redmond Seyer Over a year ago

and most of the tags that comes in the textarea does'nt have a end tag like xml does..

Poootaatoooo Over a year ago

Try running it through here to see where it's messed up codebeautify.org/xmlvalidator

Redmond Seyer Over a year ago

like I mentioned earlier, most the tags in the code does'nt have an end tag.. its self closed. So it shows invalid XML.. in that case how can I fetch data from the XML file

Poootaatoooo Over a year ago

$.parseXML can definitely process self closed tags. Even in this snippet, b:include is self closed. Are you sure there's nothing else causing it to be invalid?

|

styfle · Accepted Answer · 2017-08-13 18:55:38Z

You can use DomParser to get the ae node.

var xml = document.getElementById('a').value;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
var ae = xmlDoc.getElementById('ae');
console.log(ae.id);

<textarea id="a">
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <b:if cond='data:skin.vars.body_background.image and data:features.responsiveBackgrounds' id='ae'>
      <b:with value='&quot;body&quot;' var='selector'>
        <b:include cond='not data:view.isPreview' data='skin.vars.body_background.image' name='responsiveImageStyle'/>
      </b:with>
    </b:if>
    </html>  
</textarea>

Collectives™ on Stack Overflow

Parse HTML from a textarea using jquery

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related