首页 > 解决方案 > 如何在 HTML 中将换行符显式显示为“\n” tag?</h1> <div id="body"><p>I am writing a simple webapp that turns plain text into python code.</p> <p>Example: this is my plain text ----> print("this is my plain text")</p> <</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - 如何在 HTML 中将换行符显式显示为“\n”<textarea> tag?</h1> <div id="body"><p>I am writing a simple webapp that turns plain text into python code.</p> <p>Example: this is my plain text ----> print("this is my plain text")</p> <</h1> </div> <div class="con"> <h3>问题描述</h3> <p class="author">标签： <span>javascript</span><span>html</span><span>string</span><span>encoding</span><span>character-encoding</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p><code>.replace</code>不会改变现有字符串 - 您需要以某种方式使用结果表达式，例如将其与<code>print</code>您正在创建的屏幕连接。</p> <p>要将换行符替换为<code>\n</code>，请搜索换行符<code>/\n/g</code>并替换为<code>\\n</code>（文字反斜杠，后跟文字<code>n</code>）。</p> <p>您还应该将<code>"</code>s替换为<code>\"</code>：</p> <pre><code>set(output, `print("${input.value.replace(/\n/g, '\\n').replace(/"/g, '\\"')}")`); </code></pre> <p></p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function set(el, text) { while (el.firstChild) el.removeChild(el.firstChild); el.appendChild(document.createTextNode(text)) } /* setupUpdater will be called once, on page load. */ function setupUpdater() { var input = document.getElementsByTagName('textarea')[0], output = document.getElementsByTagName('textarea')[1], timeout = null; function handleChange() { set(output, `print("${input.value.replace(/\n/g, '\\n').replace(/"/g, '\\"')}")`); } /* eventHandler is called on keyboard and mouse events. If there is a pending timeout, it cancels it. It sets a timeout to call handleChange in 0ms. */ function eventHandler() { if (timeout) clearTimeout(timeout); timeout = setTimeout(handleChange, 0); } input.onkeydown = input.onkeyup = input.onclick = eventHandler; } setupUpdater(); document.getElementsByTagName('textarea')[0].focus();</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="grid-container"> <textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here">foo"bar</textarea> <textarea name="plainText" id="plainText" cols="40" rows="40" readonly>print("")</textarea> </div></code></pre> </div> </div> <p></p> </div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/55745685.html">entity-framework - Azure 函数中实体框架的连接字符串</a></li><li><a href="/question/55745687.html">typescript - 如何在 TypeScript 中为函数参数设置参数名称和类型？</a></li><li><a href="/question/55745691.html">ios - VERBOSE-2：Platform_view_layer.cc(28) - 尝试嵌入平台视图，但 PaintContext 不支持嵌入</a></li><li><a href="/question/55745695.html">react-native - 使用 React Native 向特定用户推送通知</a></li><li><a href="/question/55745696.html">ios - 在 Swift 中用手轻扫平滑解雇</a></li><li><a href="/question/55745698.html">reactjs - 如何使用单元格渲染器中的按钮删除 ag-grid 行</a></li><li><a href="/question/55745701.html">javascript - 将焦点大纲设置在复选框上包含标签上</a></li><li><a href="/question/55745703.html">java - JavaFX 从 SQL 查询填充组合框</a></li><li><a href="/question/55745705.html">django - 需要一个关于数据库查询优化的小建议</a></li><li><a href="/question/55745706.html">php - 如何在搜索中显示日期之间的记录？</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>