문제 발생

프로젝트 진행 중 div contenteditable로 여러 줄 텍스트를 입력받았다.

innerText로 각 줄의 문자열들을 배열로 저장하면 개행시에 "", "" 두 개의 공백 문자열이 저장되는 문제 발생

한 번의 개행에 두 개의 공백이 발생하므로, 개행이 두배로 복사되는 문제 발생

원인 분석

div contenteditable 하위 element로 공백이 <div><br /></div> 형태로 DOM이 나타난다. 아마 ""가 두 개 저장되는 이유는 비어있는 <div>와 <br/>을 각각 공백으로 받아들이기 때문이라고 생각한다.

문제 해결

document.getElementById("inputDiv")?.innerText.replaceAll('\n\n','\n').split("\n")

두 개의 개행문자들을 하나로 replace한 후, 다시 개행문자 하나로 문자열들을 나눠서 배열에 저장한다.