textarea 쓴 글 그대로, 있는 그대로 저장, 출력 wrap="hard"

textarea는 여러 줄을 작성하기 위해 쓴다. 사용자가 개행을 하게 되면 DB에 저장될 때 한 줄로 저장되어 버린다. HTML에 다시 출력해줄 때 사용자가 입력한대로 출력되지 않는 문제가 생긴다.

일단 wrap이라는 속성의 값을 hard로 한다. 이 속성은 개행을 포함시켜준다. 그리고 속성에 hard를 줄 때는 반드시 cols 속성도 있어야 한다.

<textarea rows="2" cols="20" wrap="hard">
At W3Schools you will find free Web-building tutorials. 
</textarea>

https://www.w3schools.com/tags/att_textarea_wrap.asp

1 2

3

1 2 3을 위처럼 작성해서 textarea의 값을 DB에 저장하면 아래와 같이 저장된다.

"1 2\r\n3"

이대로 출력까지만 한다면 좋겠지만 수정할 경우가 있다면

위 데이터를 textarea에 그대로 출력한 뒤 수정, 저장 시에 replace()를 사용해서 \r \n같은 문자를 <br>로 바꿔줘야한다. 

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

\r\n 또는 \r 또는 \n인 경우 <br/>로 바꿔서 DB에 저장한다.

Result로 가서 iframe안에 있는 글을 클릭하면 <br/> <br /> <br> <br     />이 있는 부분이 x로 대체된다. <BR>로 작성해도 대소문자를 무시하는 i 옵션 때문에 x로 바뀐다.

우선 정규식만 떼어 보면 /<br\s*\/?>/img 이렇다. 첫 /에서 <br로 시작하는 애를 찾는다고 쓴다. \s는 공백, 띄어쓰기를 의미한다. <br> <br  /> <br  > 등 띄어쓰기가 0~n개 있으면 찾는다. ? 앞에 있는 /의 앞에 \가 붙은 까닭은 escape character를 써서 /라는 문자 자체를 쓰기 위해서다. <br/>처럼 /가 문자로 쓰이는 경우 찾는 것이다. ?는 /가 있던지 없던지 찾는 것이다. /* 이렇게 써도 되긴 된다..

마지막으로 img는 아래와 같은 의미다.

g : 발생할 모든 pattern에 대한 전역 검색 (해당하는 애를 찾더라도 끝까지 다 찾아봄.)
i : 대/소문자 구분 안함 (<br>, <BR> 구분 안하고 다 찾음)
m : 여러 줄 검색

위에 한 줄짜리 검은 배경의 코드에서 \r,\n이 있으면 <br/>로 바꾸어 DB에 저장했다.

출력 시에는 바로 위 코드처럼 정규 표현식을 써서<br>을 찾고 그걸 \n로 바꿔준다. 그래야 사용자가 글을 볼 때 엔터를 친 것처럼 보인다.

https://github.com/copyNdpaste/Board/commit/3e687b5172666b62a3da16e9d0a2b72a62f83493