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

Question

在 angular 8 中，我正在解析 wordpress rss 提要并使用其属性之一 'content' 构建新闻滚动条。使用来自 node.js.

的 rss-parser 将 rss 提要处理成 javascript 对象

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

使用 Angular 和 rxjs，我能够派生一个对象数组，其中包含每篇文章和我需要的属性。 const http$ = this.api.rssSource$(); 来自获取提要的 angular api.service.ts 和 returns 可观察的。然后我使用以下代码将其映射到对象数组：

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>↵}

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

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

Answer 1

如果你想做的是操作发射数组中的每个对象，你可以在 RxJS map 调用中添加一个数组 map 调用：

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

这将return 修改后的数组。或者，您可以拆分数组并将其作为单独的值发出，然后 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);

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

How do I parse html elements from an observable array of objects in rxjs

html

javascript

rss

rxjs

angular