\r\n 在 API 结果中 - 如何摆脱它答案

【问题标题】：\r\n in API results - How to get rid of that\r\n 在 API 结果中 - 如何摆脱它
【发布时间】：2018-09-12 03:49:51
【问题描述】：

您可以通过访问此链接查看示例http://www.recipepuppy.com/api/?i=butter

JSON 的相关部分是：

{  
  ...
  "results":[
    ...
    {  
    "title":"Fudge Fondue \r\n\t\t\r\n\t\r\n\t\t\r\n\t\r\n\t\t\r\n\t\r\n\t\r\n\r\n",
    "href":"http:\/\/www.kraftfoods.com\/kf\/recipes\/fudge-fondue-51563.aspx",
    "ingredients":"hot fudge, butter",
    "thumbnail":"http:\/\/img.recipepuppy.com\/611087.jpg"
    },
    ...
  ]
}

我正在使用 react native 构建这个应用程序，但我想使用的语言并不重要，它总是会添加这些烦人的行。

有解决办法吗？

我知道我可以使用类似 .replace(/[\r\n]/g, ""); 的东西，但我不知道应该如何处理它，api 返回一个我存储在 data=responseJson.results 中的单个数组，然后在视图中我正在渲染导致标题FlatList 的问题是这样的

<FlatList
data={this.state.data}
keyExtractor={(item, index) => item.href}
ListEmptyComponent={this.noItemDisplay}
renderItem={({ item, index }) => (

            <Body>
              <Text>{item.title}</Text>
            </Body>
)}/>

【问题讨论】：

您可以使用您已经知道的替换功能来修剪 data 或 renderItem 道具中多余的 \r\n\t 。如果您不知道，您可以像 renderItem 一样将函数传递给数据道具。
你的expected result是什么？
@flix 纯文本

标签： javascript reactjs react-native jsx

【解决方案1】：

JavaScript trim() 方法删除字符串两端的空格，但不会删除中间的任何地方。空白可以是制表符或空格

title= "Fudge Fondue \r\n\t\t\r\n\t\r\n\t\t\r\n\t\r\n\t\t\r\n\t\r\n\t\r\n\r\n";

tileAfterRemovingSpaces = title.trim();

console.log("tileAfterRemovingSpaces", tileAfterRemovingSpaces)

Source

【讨论】：

【解决方案2】：

我为我的天真回答道歉，这是我的错误。

这里有一个更深入的总结，虽然比较理论。

根据文章Article on the nl2br line-break，您不能使用以下内容，因为这将返回一个带有 DOM 节点的字符串（它必须是一个字符串）：

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')

此外，还有这样的事情：

{this.props.text.split(“\n”).map(function(item) {
  return (
    {item}
    <br/>
  )
})}

也不行，因为包含 React Native 的 React 是纯函数，两个函数可以相邻。

所以一个解决方案是因为 span 的内联显示而将每个换行符包装在一个 span 中，让我们看看下面的代码：

{this.props.section.text.split(“\n”).map(function(item, i) {
  return (
    <span key={i}>
      {item}
      <br/>
    </span>
  )
})}

我希望这个答案能为您的具体情况提供一些见解！随时离开 cmets。感谢 Jon @Jon P 指出我的错误方法。

【讨论】：

我已将这篇文章总结为更紧凑、更易于理解的版本，而不是链接和简短的标题。
感谢您抽出宝贵时间