如何解析rxjs中可观察对象数组中的html元素

Question

在角度8中，我正在解析wordpress rss提要，并使用其属性之一“内容”来构建新闻滚动器。 使用来自node.js的rss-parser将rss feed处理为javascript对象。

我需要从（p）元素之间解析出一个http链接，一个图像和一些字符。 我的问题是我需要的数据包含在'content'属性中，我不知道编码或如何解析链接，图像和文本并将它们放入可观察范围内的变量中。

使用Angular和rxjs，我能够派生一个包含每个文章和所需属性的对象数组。 const http$ = this.api.rssSource$(); 这是从有角度的api.service.ts获取提要并返回一个observable。 然后，使用以下代码将其映射到对象数组：

this.newsItems$ = http$ .pipe( map(res => Object.values(res['items']))); 我得到这20个项目的数组

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

上面数组中的每个对象如下所示：

{content: "<a href="https://example.com/"><img width="300" height="200" src="https://example.com/some-image-300x200.jpeg" alt="blah blah blah" /></a><p>A lot of text about something and then something else</p><br /><p>jabber jabber and more jabber</p>↵<p><a href="https://example.com/example.html/" rel="nofollow">...Read More About Blah And Jabber</a></p>↵}

在有角度的模板中使用<div [innerHTML]="item.content"></div> ，我可以使用图像和大量文本来呈现html。 但是，它不是我想要的格式，需要缩短和重新排列。 我只需要完整的'a href =“ https：// xxx ...”'，'img src =“ http：// xxx ...”'和单个'p xxxx / p'。

如何访问该对象，以便可以进一步对其进行解析以填充newsLink，newsImg，shortDes的变量？

Answer 1

如果你希望做的是操纵发射阵列中的每个对象，你可以添加一个阵列map的RxJS内部呼叫map电话：

this.newsItems$ = http$.pipe(
  map(res => Object.values(res['items']).map(item => {
    // do item modification here
  }))
);

这将返回修改后的数组。 另外，您可以拆分数组并将其作为单个值发出，然后RxJS map它们以对其进行修改：

this.newsItems$ = http$.pipe(
  switchMap(items => from(items)),
  map(item => // manipulate individual items here)
);

至于实际的解析本身，可以使用正则表达式和match()函数来实现：

arrayOfAnchorTags = item.content.match(/<\s*a[^>]*>(.*?)<\/\s*\s*a>/g);