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

Posted

技术标签:

【中文标题】如何使用javascript或jquery从字符串中提取html标签的内容? [复制]【英文标题】:How to extract content of html tags from a string using javascript or jquery? [duplicate] 【发布时间】:2012-02-29 15:40:32 【问题描述】:

也许这是非常基本的,但我很困惑。 我有一个包含许多部分(div)的简单 html 页面。我在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 页面中所需部分显示该内容。

即我想在&lt;div id="title1"&gt; 中显示“这是一个标题1”和“这是一个段落1”。以&lt;div id="new1"&gt; 显示,第二对标签也一样。

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

如何从 str1 中提取“This is heading1”(以及包含在 html 标签中的类似内容)?我不知道这些的索引,因此不能在 javascript 中使用 substr() 或 substring() 函数。

【问题讨论】:

【参考方案1】:

恕我直言,您可以在 jquery 中分两步执行此操作:

第 1 步)将字符串解析为 XML/HTML 文档。

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

a) 正如 Sinetheta 所提到的

 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/

【讨论】:

【参考方案2】:

使用.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>

【讨论】:

【参考方案3】:

让我以我不认为我完全理解你想要做什么的知识来开始我的回答......但是我认为你想替换一些 (虽然你说得好像都是)带有一些数据源的 html。

我在这里设置了一个简单的例子是 jsfiddle:

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

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

希望这会有所帮助,祝你好运。

【讨论】:

【参考方案4】:

document.getElementById('元素的ID').innerHTML

如果使用 jquery $('选择器').html();

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

【讨论】:

【参考方案5】:

嗯,

首先,您应该阐明如何从您自己的 html 中获取源 html。如果您使用的是 Ajax,您应该将源代码标记为 html,甚至是 xml。

【讨论】:

以上是关于如何使用javascript或jquery从字符串中提取html标签的内容? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 javascript 或 jquery 从 JSON 中搜索文本

如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除

如何使用 jQuery 或 Javascript 从其他下拉列表中显示/隐藏相同的选项

如何使用 jQuery 或 Javascript 将字符串附加到 <a href="?

如何使用 javascript 或 Jquery 使用文件系统或操作?

我们如何在不重新加载页面的情况下使用 javascript/jQuery 更新 URL 或查询字符串?