使用jQuery解析HTML字符串 [英] Parsing of html string using jquery
问题描述
我正在尝试通过jQuery解析此html，以获得data1，data2，data3.虽然我确实获得了data2和data3，但是我无法通过我的方法获得data3.我对jQuery很陌生，所以请原谅我的无知.
<html>
<body>
<div class="class0">
<h4>data1</h4>
<p class="class1">data2</p>
<div id="mydivid"><p>data3</p></div>
</div>
</body>
</html>
这是我在jquery中如何称呼它.
var datahtml = "<html><body><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></html>";
alert($(datahtml).find(".class0").text()); // Doesn't Work
alert($(datahtml).find(".class1").text()); // work
alert($(datahtml).find("#mydivid").text()); // work
只有alert($(datahtml).find(".class0").text());无效，其余的按预期运行.我想知道这可能是因为class0里面有多个标签还是什么?在这种情况下如何获取data1?
它的行为很奇怪，因为它忽略了html和body标签，并从第一个div开始，其类为"class0". html被解析为DOM元素，但未添加到DOM中.对于添加到DOM的元素，选择器不会忽略body标签并将选择器应用于文档.您需要按如下所示将html添加到DOM.
$('#div1').append($(datahtml)); //Add in DOM before applying jquery methods.
alert($('#div1').find(".class0").text()); // Now it Works too
alert($('#div1').find(".class1").text()); // work
alert($('#div1').find("#mydivid").text()); // work
如果我们将您的html封装在某个html元素中，使其成为起点，而不是使用class ="class0"来划分您的第一个div，则您的选择器将按预期工作.
var datahtml = "<html><body><div><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></div></body></html>";
alert($(datahtml).find(".class0").text()); // Now it Works too
alert($(datahtml).find(".class1").text()); // work
alert($(datahtml).find("#mydivid").text()); // work
有关jQuery文档的jQuery解析函数jQuery()，即$()
在传递复杂的HTML时，某些浏览器可能不会生成DOM 完全复制提供的HTML源代码.如前所述，jQuery 使用浏览器的.innerHTML属性来解析传递的HTML，并 将其插入当前文档.在此过程中，一些 浏览器会过滤掉某些元素，例如
<html>，<title>或<head>元素.结果，插入的元素可能不会 代表所传递的原始字符串.
I am trying to parse this html through jQuery to get data1, data2, data3. While I do get data2 and data3 I am unable to get data3 with my approach. I am fairly new to jQuery so please pardon my ignorance.
<html>
<body>
<div class="class0">
<h4>data1</h4>
<p class="class1">data2</p>
<div id="mydivid"><p>data3</p></div>
</div>
</body>
</html>
Here is how I am calling this in my jquery.
var datahtml = "<html><body><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></html>";
alert($(datahtml).find(".class0").text()); // Doesn't Work
alert($(datahtml).find(".class1").text()); // work
alert($(datahtml).find("#mydivid").text()); // work
Only alert($(datahtml).find(".class0").text()); is not working the rest are working as expected. I am wondering it may be because class0 has multiple tag inside it or what?? How to get data1 in such scenario?
Its behaviour is weird as it igonores the html and body tag and start from first div with class = "class0". The html is parsed as DOM elements but not added to DOM. For elements added to DOM the selector does not ignore body tag and apply selectors on document. You need to add the html to DOM as given below.
$('#div1').append($(datahtml)); //Add in DOM before applying jquery methods.
alert($('#div1').find(".class0").text()); // Now it Works too
alert($('#div1').find(".class1").text()); // work
alert($('#div1').find("#mydivid").text()); // work
If we wrap your html within some html element to make it starting point instead of your first div with class="class0" then your selector will work as expected.
var datahtml = "<html><body><div><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></div></body></html>";
alert($(datahtml).find(".class0").text()); // Now it Works too
alert($(datahtml).find(".class1").text()); // work
alert($(datahtml).find("#mydivid").text()); // work
What jQuery docs say about the jQuery parsing function jQuery() i.e. $()
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser"s .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as
<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
这篇关于使用jQuery解析HTML字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
