使用 Javascript 从 HTML 字符串中的标签获取内容

Question

我正在 Titanium 中开发一个应用程序，该应用程序需要可部署到 Android 和 iOS。该应用程序通过 RSS 提要获取它的信息，我想在窗口中显示项目的内容。我尝试将它放在webview 中，但这不是我想要的，我希望能够确定哪个元素放在哪里（图像、介绍和内容）。

例如，这可能是 RSS 提要项的内容：

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> 标签，循环遍历它们并将其内容添加到窗口中。

非常感谢任何帮助！

Answer 1

我会使用jQuery 来解析内容并访问段落中的文本。 An example:

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 明确为真。 但是，在大多数环境中仍然可以间接执行脚本，例如通过属性。调用者应该意识到这一点，并通过清除或转义来自 URL 或 cookie 等来源的任何不受信任的输入来防范它。