Question

通过访问此链接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>
)}/>

Answer 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

Answer 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>
  )
})}

我希望这个答案能为您的特殊情况提供一些见识！随时发表评论。感谢Jon @Jon P指出了我的错误方法。

API结果中的\ r \ n-如何摆脱它

2 个答案: