javascript - 使用 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对于不可信来源!!!来自文档:

Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. jQuery.parseHTML does not run script in the parsed HTML unless keepScripts is explicitly true. However, it is still possible in most environments to execute script indirectly, for example via the attribute. The caller should be aware of this and guard against it by cleaning or escaping any untrusted inputs from sources such as the URL or cookies.