jQuery：解析HTML

Question

我在解析href標記時需要幫助。 當前，所有內容都被解析為文本，但是我需要解析鏈接，以便稍后可以使用AJAX將其發送到php頁面。

我的HTML看起來像：

<div id="word_content">
<br>Testing Time: 2015-10-29 17:57:11<br>
    Total Age: 19<br>
    Total Friemd: 9<br>
    Total Family: 10<br>
    <br>
Here are the suggestions  - Him_530037_: <a href="www.mytarget.com="_blank">93358546</a>
<h3>Overview</h3><br>
<ul>
    <li>(The overlap provided is not good)</li>
</ul>

<h3>Structure</h3><br>
<h4>Target:</h4><br>
<ul>
    <li>Audience.</li>
    <li>Lookalike</li>
    <li>Overlap of Audience</li> 
    <a href="https://www.myPage.com/lolPagess/?id=06" target="_blank">06<font name="names" hidden="" style="display: inline;"> - Page Likes</font></a>           
</ul>

jQuery代碼是這樣的：

var headTags = $("div#word_content").find("*").filter(function(){
                return /^h/i.test(this.nodeName);
              });

              var output = {};

              $(headTags).each(function(){
                var currentHead = $(this);

                var nextNextElem = currentHead.next().next();
                var innerText = [];
                if(nextNextElem.prop("tagName") == "UL")
                  {
                     nextNextElem.find("li").each(function(){
                       innerText.push($(this).text());
                     });  

                  }

                output[currentHead.text()] = innerText;
              });  

當前，Jquery正在獲取數據，但它僅捕獲文本而不捕獲鏈接。 我還需要解析該鏈接，以便可以在其他頁面中使用此鏈接。 有人可以幫忙嗎？

Answer 1

用這個：

 nextNextElem.find("a").each(function(){
         innerText.push($(this).text()+" & href is:"+$(this).attr("href"));                   
                         }); 

 var headTags = $("div#word_content").find("*").filter(function(){ return /^h/i.test(this.nodeName); }); var output = {}; $(headTags).each(function(){ var currentHead = $(this); var nextNextElem = currentHead.next().next(); var innerText1 = []; if(nextNextElem.prop("tagName") == "UL") { nextNextElem.find("li").each(function(index){ innerText1.push(this.firstChild.data); $(this).children().each(function(index){ innerText1.push("<a href='"+$(this).attr("href")+"'>"+$(this)[0].innerText+"</a>"); if($(this).prop('nextSibling')){ innerText1.push($(this).prop('nextSibling').nodeValue); } }); }); } output[currentHead.text()] = innerText1; }); console.log(output); $("#data").html(JSON.stringify(output)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="word_content"> <br>Testing Time: 2015-10-29 17:57:11<br> Total Age: 19<br> Total Friemd: 9<br> Total Family: 10<br> <br> Here are the suggestions - Him_530037_: <a href="www.mytarget.com="_blank">93358546</a> <h3>Overview</h3><br> <ul> <li>Multiple Countries <a href="https://www.myTarget.com/ads/?id=603" target="_blank">603<font name="names" hidden="" style="display: none;"> - Post: "သင့္ရဲ့ Data အသံုးျပဳ မွုကို အေၾကာင္းၾကားေပးေသာ..."</font></a> (MM, SG), <a href="https://www.myTarget.com/ads/?id=602" target="_blank">602<font name="names" hidden="" style="display: none;"> - Post: "Mynamar pics."</font></a></li> </ul> </div> <span>OUTPUT AREA:</span> <div id="data"></div> 

Answer 2

您可以使用類似這樣的方法來解析站點中的鏈接：

$("a").each(function(i, o) {
    console.log("Link: " + (i + 1));
    console.log("  Text is: " + $(o).text());
    console.log("  Link is: " + $(o).attr('href'));
})

結果：

www.mytarget.com=
https://www.myPage.com/lolPagess/?id=06

見JsFiddle

Answer 3

檢查每個href內a

$("a").each(function () {
    isUrlValid($(this).attr("href"));
});

從沒有使用validate-plugin的jQuery驗證網址中借來的？ ：

  function isUrlValid(url) {
        return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
    }

此正則表達式將測試有效的網址。