檢查是否有中斷標簽（<br> ) 在文本區域中

Question

當有人在表單中輸入他們的地址並在不破壞地址的情況下提交時，我已經尋找了一種解決方案（新西蘭墨爾本）。 然后我找到了一個非常簡單的 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 的新手。

非常感謝您的關心。 謝謝你。

Answer 1

如果您需要用<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>