Question

22

How to extract content of html tags from a string using javascript or jquery?

rated 0 times [ 26] [ 4] / answers: 1 / hits: 50239 / 13 Years ago, wed, february 8, 2012, 12:00:00

Maybe this is very basic, but I am all confused.
I have a simple html page with many sections (div). I have a string containing html tags in javascript. The code is as follows:

<html xmlns=http://www.w3.org/1999/xhtml>

<head>

<script type=text/javascript>

var str1=<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>;

</script>

</head>

<body>

<div id=title1></div>

<div id=new1></div>

<div id=title2></div>

<div id=new2></div>

</body>

</html>

I want to extract content of the html tags (from the string in javascript) and display that content in my html page in desired sections.

i.e. I want This is a heading1 displayed in <div id=title1> and This is a paragraph1. to be displayed in <div id=new1> and same for the second pair of tags.

I need all of this to work only on the client side. I have tried to use HTML DOM getElementByTagName method and its getting too complicated. I know very little of jquery. And I am confused. I dont understand how to go about it. Can you guide me what to use - javascript or jquery and how to use it? Is there a way to identify the from the string and iterate through it?

How to extract This is heading1 (and similar contents enclosed in the html tags) from str1?? I don't know the index of these hence cannot use substr() or substring() function in javascript.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sidneyh

Add To Favorites

Follow

Total Points: 118

Total Questions: 108

Total Answers: 105

Location: Mali

Member since Fri, Jun 18, 2021

3 Years ago

sidneyh questions

1 Next.js, redirect to 404 page inside getServerSideProps

Tue, Jun 7, 22, 00:00, 2 Years ago

1 How to generate a UUID in NextJs?

Wed, Apr 13, 22, 00:00, 2 Years ago

1 Can electronjs be used for websites

Wed, Aug 12, 20, 00:00, 4 Years ago

1 How to change scroll speed to be smooth?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Can not pass date to nivo line chart

Fri, Apr 24, 20, 00:00, 4 Years ago

View All

answered 13 Years ago leilanichasel · Accepted Answer

Using .text() as both a 'getter' and a 'setter' we can just repeat the pattern of:

target the element on the page we wish to fill

give it content from
the string

jsFiddle

<script type=text/javascript>

var str1=<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>;

$(function(){

    var $str1 = $(str1);//this turns your string into real html 



    //target something, fill it with something from the string

    $('#title1').text( $str1.find('h2').eq(0).text() );

    $('#new1').text( $str1.find('p').eq(1).text() );

    $('#title2').text( $str1.find('h2').eq(1).text() );

    $('#new2').text( $str1.find('p').eq(1).text() );

})

</script>