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

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

本文关键字：html 提取 javascript 何使用 jquery 字符串      更新时间：2023-09-26

也许这是非常基本的，但我很困惑。我有一个简单的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>

我想提取html标记的内容（从javascript中的字符串中），并在我的html页面中的所需部分中显示该内容。

即，我希望在<div id="title1">中显示"This is a heading1"，在<div id="new1">中显示"这是段落1"，第二对标签也是如此。

我需要所有这些只在客户端工作。我尝试过使用HTMLDOMgetElementByTagName方法，但它变得太复杂了。我对jquery知之甚少。我很困惑。我不知道该怎么做。你能指导我使用什么-javascript或jquery以及如何使用它吗？有没有一种方法可以从字符串中识别并遍历它？

如何从str1中提取"This is heading1"（以及html标记中包含的类似内容）？？我不知道这些的索引，因此不能在javascript中使用substr（）或substring（）函数。

使用.text（）作为"getter"answers"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>

IMHO，您可以在jquery中分两步完成：

步骤1）将字符串解析为XML/HTML文档

至少有两种方法可以做到这一点：

a） 如Sintheta 所述

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

b） 使用parseXML

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

请参阅http://api.jquery.com/jQuery.parseXML/

步骤2）从XML/HTML文档中选择文本

var text = $htmlDoc.text( jquery_selector );

请参阅http://api.jquery.com/text/

好吧，

首先，您应该澄清如何从自己的html中获取源html。如果您正在使用Ajax，您应该将源标记为html，甚至xml。

document.getElementById（'{ID-of-element}'）.innerHTML

如果使用jquery$（'selector'）.html（）；

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

让我在回答之前告诉你，我不认为我完全理解你想做什么……然而，我认为你想用一些数据源替换一些（尽管你让它听起来像所有）html。

我在这里操纵了一个简单的例子：jsfiddle：

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

这在目标div上使用jquery进行了简单的替换。

希望这能有所帮助，祝你好运。

相关文章：