如何使用javascript或jquery从字符串中提取html标签的内容?

use*_*522 8 html javascript jquery

也许这是非常基本的,但我都很困惑.我有一个简单的html页面,包含许多部分(div).我在javascript中有一个包含html标签的字符串.代码如下:

<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>
Run Code Online (Sandbox Code Playgroud)

我想提取html标签的内容(来自javascript中的字符串),并在我的html页面中显示所需部分中的内容.

即我想在"这是一个段落1"中显示"这是一个标题1" <div id="title1">.显示在<div id="new1">第二对标签中并与之相同.

我需要所有这些只在客户端工作.我试图使用HTML DOM getElementByTagName方法,它变得太复杂了.我对jquery知之甚少.我很困惑.我不明白该怎么做.你能指导我使用什么--javascript或jquery以及如何使用它?有没有办法从字符串中识别并迭代它?

如何从str1中提取"This is heading1"(和html标签中包含的类似内容)?我不知道这些索引因此无法在javascript中使用substr()或substring()函数.

Sin*_*eta 11

使用.text()作为'getter'和'setter'我们可以重复以下模式:

  • 定位我们希望填充的页面上的元素
  • 从字符串中提取内容

的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>
Run Code Online (Sandbox Code Playgroud)