时间戳

首页 > 解决方案 >
检查textarea 中是否有中断标签 ( )

javascript -
检查textarea 中是否有中断标签 ( )

问题描述

当有人在表单中输入他们的地址并在不破坏地址的情况下提交时，我已经寻找了一种解决方案（新西兰墨尔本）。然后我找到了一个非常简单的 JavaScript 解决方案来搜索“，”并打破这一行。

function divide() {
  var txt;
  txt = document.getElementById('address').value;
  var text = txt.split(",");
  var str = text.join(',</br>');
  document.getElementById("address").value = str;
}

但是即使有中断，这段代码也会中断（当用户想稍后更新输入的详细信息时），这段代码会中断两次，因为它没有任何 if 条件来检查是否有中断标记。我想知道是否有创建中断标记的方法以及如何将其包含在此代码中。我尝试了很多事情，但找不到解决方案。顺便说一句，我是 JavaScript 新手。

非常感谢您的关心。谢谢你。

标签： javascript

解决方案

如果您需要将逗号替换为 a 中的换行符<textarea>，请将逗号替换为\n字符。<br>引入元素是没有意义的。

const divide = (address) =>
  address.value = address.value.replace(/\s*,\s*/g, '\n');

document.querySelectorAll('.address').forEach(divide);
<textarea class="address" rows="3" cols="72">foo,bar</textarea>
<textarea class="address" rows="3" cols="72">foo
bar</textarea>

以下是设置已保存文本的示例：

const savedText = 'foo\nbar';
const breakText = text => text.replace(/\n/g, '<br>');

document.querySelector('.address').value = savedText;
document.querySelector('.address-css').textContent = savedText;
document.querySelector('.address-replace').innerHTML = breakText(savedText);
.address-css {
  white-space: pre;
}

div[class^="address-"] {
  border: thin solid grey;
  margin: 0.5em 0;
}
<textarea class="address" rows="3" cols="72">foo,bar</textarea>
<div class="address-css"></div>
<div class="address-replace"></div>

推荐阅读