使用Javascript從HTML字符串的標簽中獲取內容

Question

我正在開發Titanium中的一個應用程序，該應用程序需要可用於Android和iOS部署。 該應用程序通過RSS提要獲取信息，我想在窗口中顯示項目的內容。 我嘗試將其放在webview但這不是我想要的，我希望能夠確定哪個元素位於何處（圖像，簡介和內容）。

例如，這可能是RSS feed項目的內容：

var content = "<p><img src=\"..." alt=\"dreigtweet\" width=\"280\" height=\"210\" class=\"alignright size-full wp-image-19148\" \/><strong>Een 14-jarig meisje uit Rotterdam is aangehouden omdat ze in een dreigtweet stuurde naar luchtvaartmaatschappij American Airlines. Ze had zich zelf gemeld bij de politie.<\/strong><\/p> <p>Het meisje stuurde zondag onder de naam Sarah het berichtje naar de Amerikaanse luchtvaartmaatschappij, maar die nam de tweet uiterst serieus.<\/p> <p>De tiener schreef: &#8220;Hallo mijn naam is Ibrahim en ik kom uit Afghanistan. Ik maak deel uit van al-Qaeda en op 1 juni ga ik echt iets groots doen, dag.&#8221;<\/p> <p>Ze kreeg vrijwel direct antwoord van American Airlines: &#8220;Sarah, we nemen deze dreigementen zeer serieus. Jouw IP-adres en overige gegevens zullen aan de beveiliging en de FBI worden doorgegeven&#8221;.<\/p> <p>Sarah smeekte in een reeks tweets om vergiffenis, die door een steeds grotere twitterschare werd gevolgd. \u201CIk heb zo&#8217;n spijt, ik ben echt bang nu. Ik maakte een grapje, alsjeblieft doe het niet, ik ben maar een meisje\u201D, schreef de Rotterdamse in verschillende boodschappen.<\/p> <p>In de loop van zondagavond had het meisje er vele duizenden volgers bijgekregen. Inmiddels is haar Twitteraccount opgeschort.<\/p> <p>De Rotterdamse politie wil geen toelichting geven op de aanhouding van het meisje.<\/p> <p>Bron: Rijnmond.nl<\/p> <p><script type=\"text\/javascript\"><!-- google_ad_client = \"ca-pub-4354345434554545\"; \/* ijsselmondenieuws.nl *\/ google_ad_slot = \"434323442\"; google_ad_width = 468; google_ad_height = 60; \/\/--> <\/script><br \/> <script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"> <\/script><\/p>";

我可以在<strong>標記之間獲取文本，並將其放在Titanium.UI.label如下所示（或參見jsfiddle ）：

function getIntro(html) {
try {
    var intro = html;
    var imgExists = intro.indexOf('<strong>');

    if (imgExists > -1) {
        var i = imgExists + 8;
        intro = intro.substr(i);
        intro = intro.substr(0, intro.indexOf('</strong>'));
        return intro;
    }

} catch (err) {

}
}

然后將其加載到這樣的標簽中：

var introText = getIntro(postContent);

var intro = Ti.UI.createLabel({
width : '90%',
height : 'auto',
color : '#000',
backgroundColor : '#FFF',
top : '10dp',
textAlign : 'left',
font : {
    fontSize : '16dp',
    fontWeight : 'bold'
},
text : introText
});

所以這是一個障礙。 下一個是循環遍歷以下<p>元素，並將這些標簽之間的文本放入新label甚至table row以便我可以偽造這些段落。 但是，我不知道如何在<p> text here </p>獲取所有<p> text here </p>標記，以循環通過它們並將其內容添加到窗口中。

很感謝任何形式的幫助！

Answer 1

我將使用jQuery解析內容並訪問段落中的文本。 一個例子 ：

var content = "<div>...</div><p>Text1</p><p>Text2</p><div>...</div>";

// parse Content
content = $($.parseHTML(content, document, false));

// p-Tags
var p = content.filter("p");

// do something with content (for example set the text of <h1> to the joined text of all paragraphes)
$("h1").text($.map(p, $.text).join(" + "));

請看一下parseHTML函數。

警告說明：切勿將parseHTML用於不受信任的來源！！！ 從文檔中：

大多數接受HTML字符串的jQuery API都會運行HTML中包含的腳本。 jQuery.parseHTML不會在解析的HTML中運行腳本，除非keepScripts明確為true。 但是，在大多數環境中仍然可以間接執行腳本，例如通過attribute 。 呼叫者應該意識到這一點，並通過清除或轉義URL或cookie之類的任何不受信任的輸入來防止這種情況發生。