[Javascript] CRLF 치환하기(textarea 개행 시, 주의사항)

2022. 5. 18. 22:52· FE/Javascript
반응형

안녕하세요.

 

이번 포스팅에서는 HTML 요소 중 하나인 textarea를 개행할 때 사용되는 CRLF를 치환하는 방법에 대해서 적어보겠습니다.

 


1. HTML vs HTML_textarea

- HTML 내에서의 개행 : <br/>

- HTML 요소인 textarea에서의 개행 : CRLF(\r\n)

 

 

 

2. 문제 배경

- JS에서 CRLF가 오류를 일으킬 때가 있다.

→ ex) textarea(개행(CRLF)이 포함된 값이 있음)가 포함된 HTML 문자열을 innerHTML에 넣으니 오류 발생.

 

 

 

3. 해결 방법

1) innerHTML에 넣기 전에 <br/>로 치환하여 사용(innerHTML이 아니더라도, 오류가 나는 함수에서 사용 가능)

2) textarea에서 개행은 안이루어지고, <br/>로 보인다.

3) 그럼 다시, javascript에서 replaceAll을 이용해서 <br/>을 다시 \r\n으로 치환한다.

 

 

 

4. 치환 방법

1) CRLF(\r\n) → <br/>로 변경하는 방법

variable1 = variable1.replaceAll("/\r\n|\r|\n/", "<br/>");

 

2) CRLF(\r\n) → <br/>로 변경하는 방법

textarea에서 제대로 개행이 작동하도록

document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("<br/>", "\r\n");

 

 

 

참고) 특정 HTML요소를 가져오는 방법

아래의 코드에서는 textarea의 요소들을 다 가져와서 개행을 위해 치환하는 코드입니다.

var textareas = document.getElementsByTagName('textarea');
for(var i=0; i<textareas.length; i++){
    textareas[i].value = textareas[i].value.replaceAll("<br/>", "\r\n");
}
반응형

'FE > Javascript' 카테고리의 다른 글

[FE 날개달기] event flow, array api, npm, module, webpack  (2) 2023.06.06
[FE 날개달기] DOM, BOM, Load js, this  (0) 2023.06.04
[Javascipt] 변수 선언 방식 (var, let, const)  (0) 2022.05.12
[Javascript] A window.confirm() dialog generated by this page was suppressed because this page is not the active tab of the front window 해결방법  (0) 2021.10.26
[Javascript] element 요소가 있는 지 확인  (0) 2021.07.06
'FE/Javascript' 카테고리의 다른 글
  • [FE 날개달기] event flow, array api, npm, module, webpack
  • [FE 날개달기] DOM, BOM, Load js, this
  • [Javascipt] 변수 선언 방식 (var, let, const)
  • [Javascript] A window.confirm() dialog generated by this page was suppressed because this page is not the active tab of the front window 해결방법
멍목
멍목
개발 관련 새롭게 알게 된 지식이나 좋은 정보들을 메모하는 공간입니다.
반응형
멍목
김멍목의 개발블로그
멍목
전체
오늘
어제
  • 분류 전체보기 (514)
    • BE (190)
      • Spring (21)
      • Java (141)
      • Kotlin (6)
      • JPA (22)
    • FE (33)
      • Javascript (16)
      • Typescript (0)
      • React (5)
      • Vue.js (9)
      • JSP & JSTL (3)
    • DB (32)
      • Oracle (22)
      • MongoDB (10)
    • Algorithm (195)
    • Linux (8)
    • Git (6)
    • etc (42)
    • ---------------------------.. (0)
    • 회계 (4)
      • 전산회계 2급 (4)
    • 잡동사니 (2)

블로그 메뉴

  • 홈
  • 관리

공지사항

인기 글

태그

  • 자바 개발자를 위한 코틀린 입문
  • java 8
  • junit5
  • JPA 공부
  • Effective Java
  • 이펙티브 자바
  • 이펙티브자바
  • 자기개발
  • 코테 공부
  • 더 자바 Java 8
  • 자기 개발
  • 프로젝트로 배우는 Vue.js 3
  • Oracle
  • Java to Kotlin
  • 알고리즘 공부
  • 자기 공부
  • MongoDB 기초부터 실무까지
  • 자바공부
  • MongoDB with Node.js
  • 코틀린
  • 더 자바 애플리케이션을 테스트하는 다양한 방법
  • 알고리즘공부
  • 전산회계 2급 준비
  • 자바 공부
  • 자바 테스팅 프레임워크
  • MongoDB 공부
  • 자기공부
  • vue3 공부
  • JPA
  • 코테공부

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.0
멍목
[Javascript] CRLF 치환하기(textarea 개행 시, 주의사항)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.