Question

我想替换textarea中的空格和换行符，如果输入是

________________________________________
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>

Answer 1

我根本不会使用split和join，只是直接替换。请注意，不同的操作系统（甚至同一操作系统上的不同浏览器）使用不同的字符进行换行，因此为了覆盖您的基础，您可能需要进行更改：

str = str.replace(/(?:\r|\n|\r\n)/g, '<br>');

这将使用\r替换彼此相邻的每个独立\n，独立\r\n或<br>。

当然，我们将其与.replace(/ /g, '<sp>')结合起来做空格：

str = str.replace(/ /g, '<sp>').replace(/(?:\r|\n|\r\n)/g, '<br>');

无偿的现场例子：

＆＃13;

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);
});

＆＃13;

<!-- 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>

＆＃13;

如果它是一个非常大的字符串，那么两次通过它（两次调用replace）可能并不理想。在不太可能的情况下，我们可以使用回调函数将内容合并为一个replace：

str = str.replace(/(?: |\r|\n|\r\n)/g, function(m) {
    return m === " " ? "<sp>" : "<br>";
});

实例：

＆＃13;

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);
});

＆＃13;

<!-- 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>

＆＃13;

但是在正常大小的字符串的正常情况下，对具有直接替换的replace的两次调用可能比使用回调函数的单次调用更好。

Answer 2

您可以通过传递函数作为第二个参数，一次性使用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"

Answer 3

键入时应更换：）

＆＃13;

[].forEach.call(document.getElementsByTagName("textarea"), function(textarea) {
  textarea.addEventListener("input", function() {
    textarea.value = textarea.value.replace(/\n/g, "<br>").replace(/ /g, "<sp>");
  });
});

＆＃13;

<textarea></textarea>

＆＃13;

可以更简单地完成，但我认为这可能是一个值得学习的有趣内容。

第一行以NodeList的形式获取页面上的所有textareas。然后，我们使用[].forEach.call遍历该NodeList，缩短Array.prototype.forEach.call，因为NodeList没有自己的forEach。

第二行设置一个事件监听器，只要当前textarea（在循环中）接收输入，就会触发该事件监听器。事件监听器等待某事发生，并在任何时候调用函数。

第三行将该textarea的值设置为当前值，其中换行符（\n）替换为<br>，空格替换为<sp>。

如何替换textarea中的换行符

3 个答案: