【问题标题】:How to display a text body with html tags, in React Native?如何在 React Native 中显示带有 html 标签的文本正文?
【发布时间】:2021-12-14 18:36:16
【问题描述】:

我有一个 api,可以从我所在国家/地区的热门网站返回一些文本。您可以将这些文本视为用户的 cmets。但是这些 cmets 可以包含链接(标签),也可以包含“”标签。其中一些看起来像这样;

所以基本上我想知道当我们想在 React Native 中显示这些文本时如何管理它?

【问题讨论】:

  • 你想从你得到的文本中删除 html 标签吗?
  • 不幸的是,没有干净简单的解决方案。最简单的方法是在 webview 中呈现 html 文本。但有效的方法是尝试使用正则表达式获取标签及其内容,并将其替换为反应原生组件。就像这个答案一样:stackoverflow.com/a/51423393/5793132 但是这里的问题是属性(比如href),你应该用正则表达式获取属性和内容并在之后替换它,这会有点困难。对于自闭合标签,您只需将标签替换为 RN 组件即可。

标签: javascript reactjs react-native


【解决方案1】:

也许这会回答你的问题:

const regex = /<[^>]*>/mgi
const text = "A text with <strong>html tags</strong>"
const text_without_tags = text.replace(regex, "")
// text_without_tags = 'A text with html tags'

regular expresion 获取字符串中的每个标签(及其属性)。本例中的方法replace 将替换正则表达式通过"" 获得的标签(所以什么都没有)。

但是,如果您想保留标签,但只将它们更改为 JSX 标签,请使用react-html-parser

我不确定我是否理解你的目标。

【讨论】:

  • 这很棒,我想做的是例如有一个像 href 这样的链接,我需要能够将它解析为 元素,我还需要 href 值,因为我会链接它
  • 这应该可以通过正则表达式 (regex) 实现。不过,你能试试react-html-parser 吗?
  • 我会尝试,我也找到了 react-native-html-parser,我们会看到
猜你喜欢
  • 2011-12-13
  • 1970-01-01
  • 2021-11-10
  • 1970-01-01
  • 2012-10-29
  • 2023-04-02
  • 2018-01-26
  • 2015-12-27
  • 1970-01-01
相关资源
最近更新 更多