blocks|key|3950439|text|我将在字符串上使用正则表达式来实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3950440|+var+patt1+=+/\n/g;
+str.replace(patt1,+'<br/>');|code-block|syntax|javascript|3950441|它将替换所有换行分隔符。|3950442|这里是一个使用文本区域元素的jsfiddle|offset|length|3950443|阅读更多here|3950444|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/ze8pLw03/1/|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace^0|0|0|0|E|8|0|0|4|4|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>I would use a regex on the string to achieve this:</p>

<pre><code> var patt1 = /\n/g;
 str.replace(patt1, '&lt;br/&gt;');
</code></pre>

<p>It will replace all newline delimiters.</p>

<p>Here in a <a href="https://jsfiddle.net/ze8pLw03/1/" rel="nofollow">jsfiddle</a> Using a text area element</p>

<p>Read more <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace" rel="nofollow">here</a></p>


blocks|key|686150|text|当您可以简单地将whitespace:+pre-wrap添加到显示字符串的任何位置的CSS规则中时，这似乎是一项很大的工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|686151|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/white-space^0|8|K|8|K|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>That seems like a lot of work when you could simply add <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" rel="nofollow"><code>whitespace: pre-wrap</code></a> to the CSS rules of wherever you're displaying the string.</p>


blocks|key|3950540|text|我写了下面的html来帮助你理解所发生的事情。在下面的示例中，var+a是由换行符分隔的两个单词。Var+b将所有新行替换为用空格括起来的xyzzy。Var+c将所有新行替换为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3950541|。|3950542|如果只是将字符串写入文档，则在重新格式化和未重新格式化的文本中都可以识别。在非格式化任务中，新行被转换为空格，并且不会出现。但是，在带格式的文本中，由于保留了空格和换行符，因此新行确实会导致换行。|3950543|现在我们转到类型为text的输入框。新行是非打印字符，不会显示。只是将其视为另一段文本，并未经过特殊处理。|3950544|接下来，我们转到texture元素。该元素不处理HTML选项，因此被视为另一段文本。但是，换行符用于表示textarea元素中的换行符。|3950545|如果要删除换行符，只需将其替换为空字符串，替换方式与替换方式相同。您不能真的忽略换行符。你只需要意识到它们是如何被各种元素处理的。|3950546|​|3950547|<!DOCTYPE+html>
<html>
<head>
<meta+encoding="UTF-8"+/>
<title>Javascript+replace+function</title>
<script>
++++var+a+=+"first\nsecond";
++++var+b+=+a.replace(/\n/,+"+xyzzy+");
++++var+c+=+a.replace(/\n/,+"<br+/>");
</script>
</head>
<body>
+++<p>This+is+a+statement+to+study+the+Javascript+replace+function
++++++with+new+line+characters</p>
+++<ul>
++++++<li>Value+a+is+the+string+first\nsecond+(\n+is+a+new+line+character)</li>
++++++<li>Value+b+has+all+of+the+new+lines+replaced+by+xyzzy+surrounded+by+spaces</li>
++++++<li>Value+c+has+all+of+the+new+lines+replaced+by+&lt;br+/&gt;</li>
+++</ul>
<script>
+++var+a;
+++var+b;
+++var+c;
+++function+starter()+{
++++++var+text1+=+document.getElementById("text1");
++++++var+area1+=+document.getElementById("area1");
++++++var+text2+=+document.getElementById("text2");
++++++var+area2+=+document.getElementById("area2");
++++++var+text3+=+document.getElementById("text3");
++++++var+area3+=+document.getElementById("area3");
++++++text1.value+=+a;
++++++area1.value+=+a;
++++++text2.value+=+b;
++++++area2.value+=+b;
++++++text3.value+=+c;
++++++area3.value+=+c;
+++}
+++function+list()+{
++++++document.writeln("<li>Value+a+"+%2B+a+%2B+"</li>");
++++++document.writeln("<li>Value+b+"+%2B+b+%2B+"</li>");
++++++document.writeln("<li>Value+c+"+%2B+c+%2B+"+</li>");
+++}
+++window.onload+=+starter;
</script>
<p>Using+Javscript+to+display+variables</p>
<ul>
<script>
+++list();
</script>
</ul>
<p>Working+with+preformatted+text</p>
<pre><ul>
<script>
+++list();
</script>
</ul></pre>
<form>
+++<p>A+<input+type+=+"text1"+id+=+"text1"+/></p>
+++<p>A+<textarea+id="area1"></textarea>+</p>
+++<p>B+<input+type+=+"text"+id+=+"text2"+/></p>
+++<p>B+<textarea+id="area2"></textarea>+</p>
+++<p>C+<input+type+=+"text"+id+=+"text3"+/></p>
+++<p>C+<textarea+id="area3"></textarea>+</p>
</form>
<script>
+++var+test1+=+/\n/;
+++document.writeln("<li>A+"+%2B+test1.test(a)+%2B+"</li>");
+++document.writeln("<li>B+"+%2B+test1.test(b)+%2B+"</li>");
+++document.writeln("<li>C+"+%2B+test1.test(c)+%2B+"</li>");</script>
</body>
</html>|code-block|syntax|javascript|3950548|3950549|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|11|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|12|8|@]|9|@]|A|$Q|R]]|$1|S|3|M|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>I wrote the following html to help you understand what happens.  In the example below, var a is two words separated by a new line character.  Var b has all of the new lines replaced by xyzzy surrounded by spaces.  Var c has all of the new lines replaced by <br />.</p>

<p>If you just write the strings into the document, &lt;br /&gt; is recognized in both reformatted and non-reformatted text.  In non-formatted task, the new line is converted to a space and doesn't appear.  However, in formatted text, the new line does cause a new line since spacing and line breaks are preserved.</p>

<p>Now we go to the input box of type text.  The new line is a non-printing character and doesn't show up.  The &lt;br /&gt; is just viewed as another piece of text and does not undergo special processing.</p>

<p>Next we go to the texture element.  This element doesn't process HTML options, so the &lt;br /&gt; is just viewed as another piece of text.  However, the new line character is used to represent a line break in the textarea element.</p>

<p>If you want to remove the new line characters, just replace them with an empty string in the same way that it was replaced by &lt;br /&gt;.  You can't really ignore the new line characters.  You just have to realize how they are processed by the various elements.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta encoding="UTF-8" /&gt;
&lt;title&gt;Javascript replace function&lt;/title&gt;
&lt;script&gt;
    var a = "first\nsecond";
    var b = a.replace(/\n/, " xyzzy ");
    var c = a.replace(/\n/, "&lt;br /&gt;");
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;p&gt;This is a statement to study the Javascript replace function
      with new line characters&lt;/p&gt;
   &lt;ul&gt;
      &lt;li&gt;Value a is the string first\nsecond (\n is a new line character)&lt;/li&gt;
      &lt;li&gt;Value b has all of the new lines replaced by xyzzy surrounded by spaces&lt;/li&gt;
      &lt;li&gt;Value c has all of the new lines replaced by &amp;lt;br /&amp;gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;script&gt;
   var a;
   var b;
   var c;
   function starter() {
      var text1 = document.getElementById("text1");
      var area1 = document.getElementById("area1");
      var text2 = document.getElementById("text2");
      var area2 = document.getElementById("area2");
      var text3 = document.getElementById("text3");
      var area3 = document.getElementById("area3");
      text1.value = a;
      area1.value = a;
      text2.value = b;
      area2.value = b;
      text3.value = c;
      area3.value = c;
   }
   function list() {
      document.writeln("&lt;li&gt;Value a " + a + "&lt;/li&gt;");
      document.writeln("&lt;li&gt;Value b " + b + "&lt;/li&gt;");
      document.writeln("&lt;li&gt;Value c " + c + " &lt;/li&gt;");
   }
   window.onload = starter;
&lt;/script&gt;
&lt;p&gt;Using Javscript to display variables&lt;/p&gt;
&lt;ul&gt;
&lt;script&gt;
   list();
&lt;/script&gt;
&lt;/ul&gt;
&lt;p&gt;Working with preformatted text&lt;/p&gt;
&lt;pre&gt;&lt;ul&gt;
&lt;script&gt;
   list();
&lt;/script&gt;
&lt;/ul&gt;&lt;/pre&gt;
&lt;form&gt;
   &lt;p&gt;A &lt;input type = "text1" id = "text1" /&gt;&lt;/p&gt;
   &lt;p&gt;A &lt;textarea id="area1"&gt;&lt;/textarea&gt; &lt;/p&gt;
   &lt;p&gt;B &lt;input type = "text" id = "text2" /&gt;&lt;/p&gt;
   &lt;p&gt;B &lt;textarea id="area2"&gt;&lt;/textarea&gt; &lt;/p&gt;
   &lt;p&gt;C &lt;input type = "text" id = "text3" /&gt;&lt;/p&gt;
   &lt;p&gt;C &lt;textarea id="area3"&gt;&lt;/textarea&gt; &lt;/p&gt;
&lt;/form&gt;
&lt;script&gt;
   var test1 = /\n/;
   document.writeln("&lt;li&gt;A " + test1.test(a) + "&lt;/li&gt;");
   document.writeln("&lt;li&gt;B " + test1.test(b) + "&lt;/li&gt;");
   document.writeln("&lt;li&gt;C " + test1.test(c) + "&lt;/li&gt;");&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3950559|text|当JavaScript字符串文字中有\n时，它表示换行符，而不是后跟n的反斜杠。如果需要反斜杠后跟n，则必须用另一个反斜杠字符转义反斜杠字符。也就是说，您必须将\\n放在字符串文字中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3950560|当用户按下Enter键时，可以使用以下代码将\n放在文本区域中：|3950561|$(document).ready(function()+{
++function+replaceTextareaSelection(textarea,+replacement)+{
++++var+text+=+textarea.value,
++++++selectionStart+=+textarea.selectionStart,
++++++selectionEnd+=+textarea.selectionEnd;
++++textarea.value+=+text.slice(0,+selectionStart)+%2B+replacement+%2B+text.slice(selectionEnd);
++++var+selectionIndex+=+selectionStart+%2B+replacement.length;
++++textarea.setSelectionRange(selectionIndex,+selectionIndex);
++}

++$('#textlabel-input').keydown(function(e)+{
++++if+(e.which+==+13)+{
++++++e.preventDefault();
++++++replaceTextareaSelection(this,+'\\n');
++++}
++});
});|code-block|syntax|javascript|3950562|jsfiddle|3950563|它还处理用户选择了文本区中的文本并按下Enter键的情况。要测试这一点，请在jsfiddle的文本区域中输入abcdefghi并选择def。然后按Enter键。文本区域的值将更改为abc\nghi，并且插入符号将紧跟在n之后。|3950564|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/9cb2a4tz/^0|I|2|Y|1|1D|1|28|3|0|5|5|M|2|0|0|0|8|0|0|J|5|1I|9|1U|3|21|5|2I|8|31|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>When you have <code>\n</code> in a JavaScript string literal, it represents a newline character, not a backslash followed by <code>n</code>. If you want a backslash followed by <code>n</code>, you have to escape the backslash character with another backslash character. That is, you have to put <code>\\n</code> in the string literal.</p>

<p>You can use the following code to place <code>\n</code> in the textarea when the user presses the <code>Enter</code> key:</p>

<pre><code>$(document).ready(function() {
  function replaceTextareaSelection(textarea, replacement) {
    var text = textarea.value,
      selectionStart = textarea.selectionStart,
      selectionEnd = textarea.selectionEnd;
    textarea.value = text.slice(0, selectionStart) + replacement + text.slice(selectionEnd);
    var selectionIndex = selectionStart + replacement.length;
    textarea.setSelectionRange(selectionIndex, selectionIndex);
  }

  $('#textlabel-input').keydown(function(e) {
    if (e.which == 13) {
      e.preventDefault();
      replaceTextareaSelection(this, '\\n');
    }
  });
});
</code></pre>

<p><a href="https://jsfiddle.net/9cb2a4tz/" rel="nofollow">jsfiddle</a></p>

<p>This also handles the case where the user has selected text in the textarea and presses the <code>Enter</code> key. To test this, enter <code>abcdefghi</code> in the textarea in the jsfiddle and select <code>def</code>. Then press the <code>Enter</code> key. The value of the textarea will change to <code>abc\nghi</code>, and the caret will be just after the <code>n</code>.</p>


<p>i have a basic system to convert <code>\n</code> to <code>&lt;br/&gt;</code> but when i add <code>Hello\nhow are you</code> in the box from a variable, <code>\n</code> not is show, and this not have effect, only works when the user add <code>\n</code> in the textarea to show in preview box. how can ignore <code>\n</code> in js vars?</p>

<pre><code>function convertirDialogo(val_, type) {
    val_ = val_.replace(/\\t/g, "&lt;p class=\"create_t\"&gt;&lt;/p&gt;");

    console.log(type);
    if (type !== 'DIALOG_STYLE_LIST') {
        val_ = val_.replace(/\\n/g, "&lt;br /&gt;");
    }

    for (var i = 0; i &lt; val_.length; i++) {
        var _list_created = false;
        if (type === 'DIALOG_STYLE_LIST') {
            var l_ = val_.charAt(i) == "\\" &amp;&amp; val_.charAt(i + 1) == "n";
            if (i == 0 &amp;&amp; l_ == false) {
                val_ = '&lt;li&gt;' + val_;
            } else {
                if (l_) {
                    val_ = val_.replace(/\\n/g, '&lt;li&gt;');
                }
            }
        }
        var start = i;
        var end = i + 7
        if (val_.charAt(start) == '{' &amp;&amp; val_.charAt(end) == '}') {
            var _col = val_.substring(start, end + 1);
            var __col = _col.substring(1, _col.length - 1);

            val_ = val_.replace(_col, "&lt;span style=\"color: #" + __col + ";\"&gt;");
        }
    }
    return val_;
}
</code></pre>

<p>example: <a href="http://image.prntscr.com/image/3312c7182fdf4e1d8a538c941c86bdf7.png" rel="nofollow">http://image.prntscr.com/image/3312c7182fdf4e1d8a538c941c86bdf7.png</a></p>

<p>that works, but if i add button to add <code>\n</code> to textbox from js not works.</p>


Ignore \n in javascript string

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个基本的系统来转换\n到<br/>，但是当我从一个变量在框中添加Hello\nhow are you时，\n不显示，这没有效果，只有当用户在文本区域添加\n以在预览框中显示时才有效。如何忽略js vars中的\n？function convertirDialogo(val_, type) {    val_ = ...

问忽略javascript字符串中的\n
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略javascript字符串中的\nEN