如何替换文本区域中的换行符

How to replace the line break in a textarea

本文关键字：区域 换行符 文本 何替换 替换      更新时间：2023-09-26

我想替换文本区域中的空格和换行符，如果输入是 

________________________________________
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('&lt'+"sp"+'&gt');
    document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

我根本不会为此使用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 的两次调用可能比使用回调函数的单个调用更好。

您可以通过传递函数作为第二个参数一次性使用String.prototype.replace

来完成 
var str = 'foo bar'nbaz';
str = str.replace(/('r'n|'n)|('s)/g, function ($0, $1, $2) {
    return ($2 && '&lt;sp&gt;') || '&lt;br&gt;'
});
// "foo&lt;sp&gt;bar&lt;br&gt;baz"

应在键入时替换:)

[].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 遍历该 NodeList，从 Array.prototype.forEach.call 缩短，因为NodeList没有自己的forEach。

第二行设置一个事件侦听器，每当当前文本区域（在循环中）收到输入时触发该侦听器。 事件侦听器等待某些事情发生，并在发生时调用函数。

第三行将该文本区域的值设置为当前值的任何值，换行符 （ 'n ） 替换为 <br>，空格替换为 <sp> 。

相关文章：