All geek questions in one place

How to extract html tag content from string using javascript or jquery?

It may be very simple, but I'm 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 the contents of html tags (from a string in javascript) and display that content on my html page in the right sections.

i.e. I want "This is <div id="title1"> be displayed in <div id="title1"> and "This is paragraph 1". to display in <div id="new1"> and for the second pair of tags.

I need all this to work only on the client side. I tried using the HTML DOM getElementByTagName method and its too complicated. I know very little about jquery. And I'm embarrassed. I don’t understand how to do this. Can you advise me what to use - javascript or jquery and how to use it? Is there a way to identify a string and scroll it?

How to extract “This is header1” (and similar content enclosed in html tags) from str1 ?? I do not know that the index of them therefore cannot use the substr () or substring () function in javascript.

+6
source share
5 answers

Using . text () as "getter" and "setter", we can simply repeat the pattern:

  • indicate the element on the page we want to fill.
  • give it a line

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>
+9
source

IMHO, you can do this in jquery in two steps:

Step 1) Parse the string in the XML / HTML document.

There are at least two ways to do this:

a) As mentioned by Sinetheta p>

  var htmlString = "<html><div></div></html>"; var $htmlDoc = $( htmlString );

b) Using parseXML

 var htmlString = "<html><div></div></html>"; var htmlDoc = $.parseXML( htmlString ); var $htmlDoc = $( htmlDoc );

Please refer to http://api.jquery.com/jQuery.parseXML/

Step 2) Select the text from the XML / HTML document.

 var text = $htmlDoc.text( jquery_selector );

Please refer to http://api.jquery.com/text/

+2
source

Well,

First of all, you should clarify how you get the original html from your own html. If you use Ajax, you must specify the source as html, even xml.

+1
source

document.getElementById ('{item ID}'). innerHTML

if you use jquery $ ('Selector') HTML () ;.

 <div id="test">hilo</div> <script> alert($('#test').html()); <script>
0
source

Let me preface my answer with the understanding that I don’t think I fully understand what you want to do ... however, I think you want to replace some (albeit make them look like everyone else) html with some data source.

I put together a simple example: jsfiddle here:

http://jsfiddle.net/rS2Wt/9/

This will simply replace the use of jquery on the target div.

Hope this helps, good luck.

0
source

Source: https://habr.com/ru/post/907910/

More articles:


All Articles