使用Javascript从HTML-string中获取标签内容

时间:2014-04-14 19:48:58

标签: javascript html rss titanium

我正在开发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>标记,以循环播放它们并将其内容添加到窗口。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分: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中包含的脚本。除非keepScripts显式为true,否则jQuery.parseHTML不会在解析的HTML中运行脚本。 但是,在大多数环境中仍然可以间接执行脚本,例如通过属性。调用者应该注意这一点,并通过清除或转发来自URL或cookie等来源的任何不受信任的输入来防范它。