HTML JavaScript中换行符问题

Posted 2023-04-08

为什么从input取到的字符串的换行符\n不会生效,而自己定义的字符串\n会生效,什么道理,两个都是变量类型都是字符串啊

参考技术A 输入框里输入都不会转义的，就算你在里面输入一个<div></div> 他也只是照常显示出来

如果是用js插入，可以用 \r\n 即可换行

如何在react / javascript中处理换行符<br>并将其转换为html [重复]

【中文标题】如何在react / javascript中处理换行符<br>并将其转换为html [重复]

【英文标题】：How to process line-break <br> in react/javascript and convert it to html [duplicate]

【发布时间】：2020-03-17 09:38:27

【问题描述】：

如果我有一个 javascript 变量，例如在反应中：

variable

如果我打印出来，我会得到：

one<br><br>None 

如何更改来自数据库的<br><br> html 断线并获得结果：

one

None

【参考方案1】：

您可以使用函数 dangerouslySetInnerHTML 来执行此操作。

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

<div dangerouslySetInnerHTML=__html: variable />;

然后 HTML 代码将照此呈现。

【参考方案2】：

我认为当您从数据库接收字符串 时，它是字符串而不是 html 元素，并且反应无法将其显示为 html 元素。您可以使用此react-html-parser 将从数据库接收到的此类 html 模板转换为显示为 html 元素。

import React from 'react';
import ReactHtmlParser,  processNodes, convertNodeToElement, htmlparser2  from 'react-html-parser';

const StringToHtml = () => 
// retrieves variable here
  return (
    return <div> ReactHtmlParser(variable) </div>;
  );

export default StringToHtml;

【参考方案3】：

默认情况下，React 会转义 HTML 以防止 XSS（跨站点脚本）。如果你真的想渲染 HTML，你可以使用dangerouslySetInnerHTML 属性：

<div dangerouslySetInnerHTML=__html: variable />

或者您可以使用任何解析 html 字符串的节点包。