[JavaScript] 문자 개행 처리 / 줄바꿈 처리 ('\n', 개행문자) / replace

 

개행문자 : 컴퓨터에서 줄바꿈을 나타내는 제어문자

 

개행이 \n으로 넘어오는 경우가 생깁니다.

이럴 경우에는 HTML 화면에 개행이 안되는 경우가 있는데요.

 

아래와 같이 해당 부분을 변경 하면 됩니다.

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

 

 

---

문제

데이터를 보여주는데, 줄바꿈이 되지 않아서 원인을 분석하였습니다.

원인

개발자 도구에 Console에

console.log(agentData);

로 확인해보니 사용하고자 하는 REMARK에 '\r\n\r\n' 가 들어가서 개행 처리가 필요했습니다.

 

해결

 

{agentData ? <>{agentData.REMARK}</> : <TextLoading />}

 

{agentData ? (
                    <>
                      {agentData.REMARK.replace(/(?:\r\n\r\n|\n\n)/g, '\r\n')
                        .split('\r\n')
                        .map(item => (
                          <p key={item}>
                            {item}
                          </p>
                        ))}
                    </>
                  ) : (
                    <TextLoading />
                  )}

.replace를 사용하고,

.split를 통해 문자열을 구분하였고,

.map을 통해 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러

그 함수의 반환값으로 새로운 배열을 만들어서 처리하였습니다.

 

String.prototype.replace()

String.prototype.replace() - JavaScript | MDN

 

String.prototype.split()

String.prototype.split() - JavaScript | MDN

Array.prototype.map()

Array.prototype.map() - JavaScript | MDN

 

 

 

추가로...

[픽업 시]와 [반납 시]와의 세로 간격은 CSS의 선택자 :nth-child(2n) (= 두번째 마다 선택)를 사용해서 넓혀 줬습니다.