如何从javascript或jquery的字符串中提取html标签的内容？ [英] How to extract content of html tags from a string using javascript or 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>这是一个heading1< / h2>< p>这是一个paragraph1。< < / id>< / div>< div id ='item2'>< h2>这是一个标题2< / h2>< p>这是另一段。< / 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 paragraph1中显示This is a heading1。将显示在< div id =new1> 以及第二对标记中。
我需要所有这些才能在客户端工作。我试图使用HTML DOM getElementByTagName方法，它变得太复杂了。我对jquery知之甚少。我很困惑。我不明白如何去做。你能指导我使用什么 - JavaScript或jQuery和如何使用它？有没有一种方法来识别字符串并遍历它？
如何从str1中提取This is heading1（以及包含在html标签中的类似内容）？我不知道这些索引，因此不能在javascript中使用substr（）或substring（）函数。 使用
使用<作为'getter'和'setter'的一个href =http://api.jquery.com/text/ =noreferrer> .text（），我们可以重复以下模式：
字符串
< script type =text / javascript>
var str1 =< html>< body>< div id ='item1'>< h2>这是一个heading1< / h2>< p>这是一个paragraph1。< < / id>< / div>< div id ='item2'>< h2>这是一个标题2< / h2>< p>这是另一段。< / p>< / div>< div id ='lastdiv'> last< / div>< / body>< / html>;
$（function（）{
var $ str1 = $（str1）; //这会将您的字符串转换为真正的html
//定位某物，字符串
$（'＃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（））;
}）
< /脚本>
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.
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
<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>
这篇关于如何从javascript或jquery的字符串中提取html标签的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
