[JavaScript] textarea text 줄바꿈 처리 / 개행 처리 / shift+enter

Javascript로 간단한 채팅을 구현하는 중,

textarea 입력창에서 shift+enter 입력 시 줄 바꿈 되어 출력되는 기능을 추가했다.

( textarea는 input text와 다르게 여러 줄의 문자열을 입력할 수 있다. )

button 클릭과 textarea enter키 입력 시 채팅 내용이 입력되도록 이벤트 처리를 먼저 해두었다.

 

이벤트 처리 부분

const sendBtnElement = document.querySelector(".btn-send");
const textareaElement = document.querySelector(".textarea");

sendBtnElement.addEventListener("click", () => { sendMessage() });
textareaElement.addEventListener("keyup", (e) => {
  if (e.keyCode === 13) {
    if (!e.shiftKey) {
      sendMessage();
    }
  }
});

 

해당 textarea value 값의 줄바꿈을 <br> 태그로 변경하는 코드를 추가했다.

/(\n|\r\n)/g 은 개행의 정규식이다.

let text = document.querySelector(".textarea").value;
text = text.replaceAll(/(\n|\r\n)/g, "<br>");

String.prototype.replaceAll()

The replaceAll() method returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match.

출처 - MDN

 

메시지를 추가하면 위 화면과 같이 <br> 태그가 잘 적용되어 보인다.