如何替换文本区域中的换行符
如果输入是，我想替换文本区域中的空格和换行符
________________________________________
i am a
fat
boy zzz
________________________________________结果应该是
i<sp>am<sp>a<br>fat<br><br>boy<sp>zzz其中空格替换为<sp>，换行符替换为<br>。
空格替换成功，但当我尝试用<br>替换新行时失败(我尝试了3-4种不同的方法，但都不能成功)
如果有人有主意的话，我将不胜感激。提前感谢
代码如下
<!DOCTYPE html>
<html>
<body>
<textarea id="txtArea" rows="10" cols="70">i am fat boy </textarea>
<input type="text" id="StringTextBox" value="" >
<p id="demo"> </p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = document.getElementById("txtArea").value;
var res = str.split(' ').join('<'+"sp"+'>');
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2015-03-16 23:48:38
我根本不会使用split和join来做这件事，而是直接替换。请注意，不同的操作系统(甚至同一操作系统上的不同浏览器)使用不同的换行字符，因此为了覆盖您的基础，您可能需要一个替代字符：
str = str.replace(/(?:\r|\n|\r\n)/g, '<br>');这将用<br>取代每个独立的\r、一个独立的\n或一个紧挨着的\r\n。
当然，我们将其与.replace(/ /g, '<sp>')相结合来创建空格：
str = str.replace(/ /g, '<sp>').replace(/(?:\r|\n|\r\n)/g, '<br>');免费的实时示例：
var originals = [
"i am a\nfat\n\nboy zzz",
"i am a\rfat\r\rboy zzz",
"i am a\r\nfat\r\n\r\nboy zzz"
];
originals.forEach(function(str) {
str = str.replace(/ /g, '<sp>').replace(/(?:\r|\n|\r\n)/g, '<br>');
snippet.log(str);
});<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
如果它是一个非常大的字符串，那么两次通过它(两次调用replace)可能并不理想。在不太可能情况下，我们可以使用回调函数将所有内容组合到单个replace中：
str = str.replace(/(?: |\r|\n|\r\n)/g, function(m) {
return m === " " ? "<sp>" : "<br>";
});现场示例：
var originals = [
"i am a\nfat\n\nboy zzz",
"i am a\rfat\r\rboy zzz",
"i am a\r\nfat\r\n\r\nboy zzz"
];
originals.forEach(function(str) {
str = str.replace(/(?: |\r|\n|\r\n)/g, function(m) {
return m === " " ? "<sp>" : "<br>";
});
snippet.log(str);
});<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
但在正常情况下，对于大小合理的字符串，两次使用直接替换的replace调用可能比一次使用回调函数的调用要好。
Stack Overflow用户
发布于 2015-03-16 23:44:52
通过将函数作为第二个参数传递，您可以使用String.prototype.replace一次性完成此操作
var str = 'foo bar\nbaz';
str = str.replace(/(\r\n|\n)|(\s)/g, function ($0, $1, $2) {
return ($2 && '<sp>') || '<br>'
});
// "foo<sp>bar<br>baz"Stack Overflow用户
发布于 2015-03-16 23:56:57
应在您键入时替换:)
[].forEach.call(document.getElementsByTagName("textarea"), function(textarea) {
textarea.addEventListener("input", function() {
textarea.value = textarea.value.replace(/\n/g, "<br>").replace(/ /g, "<sp>");
});
});<textarea></textarea>
这可以做得更简单，但我认为这可能是一件值得学习的有趣的事情。
第一行以NodeList的形式获取页面上的所有文本。然后，我们使用[].forEach.call ( Array.prototype.forEach.call的缩写)遍历该NodeList，因为NodeList没有自己的forEach。
第二行设置一个事件侦听器，只要当前的文本区域(在循环中)接收到输入，就会触发该事件侦听器。事件侦听器等待事件发生，并在事件发生时调用函数。
第三行将文本区域的值设置为当前值，换行符(\n)替换为<br>，空格替换为<sp>。
https://stackoverflow.com/questions/29080989
复制相似问题
腾讯云开发者
