HTML string trim() 하기

요즘 react-native로 커뮤니티 앱을 개발하느라 정신이 없이 바쁘다.

 

근데 그 와중에 피드 올릴때 trim을 해달라는 요청을 받게 된다. 그래서 쓱 보니까 이게 왠걸

에디터에서 HTML을 string으로 넘겨주고 있었다. 자 그럼 trim을 어떻게 할지 생각해보자.

 

trim() 함수는 앞 뒤의 빈 공백을 지우는 역할을 한다. 그럼 앞에서 한번, 뒤에서 한번 총 두번을 체크해야한다. 그리고 "빈 공백" 이라는 것은 내용물이 없는 div 태그를 말함으로 <br> 태그를 이용한 한 줄 띄우기 혹은 &nbsp;를 사용한 한 칸 띄기 또한 빈 공백으로 볼 수 있다.

 

정리해보면 div태그 안에 내용물이 <br > 이거나 &nbsp;으로만 이루어진 경우를 빈 공백으로 볼 수 있고, 이런 div를 제거해야한다.

 

내가 사용하는 에디터에서는 줄 바꿈을 <div><br></div>으로, 한 칸띄우기는 <div>&nbsp;</div>로 구현되어있음으로 이를 기억하고 작업한다.

const trimHTMLTagChecker = (stringArr: string[]) => {
  // 매개변수로 div 태그안의 내용을 배열들로 받는다.
  const br = '<br>';
  const nbsp = '&nbsp;'; 
  // 조건이되는 문자열을 선언
 
  let cutIdx = 0; 
  // 몇 번째 인덱스 까지 잘라야할지 모르니 let으로 선언

  for (let i = 0; i < stringArr.length; i++) {
  // trim의 경우 공백이 아닌경우 멈춰야함으로 for문과 break사용
    const checkTarget = stringArr[i]; // 확인 할 문자열
    
    const brCheck = checkTarget.split(br).join('').trim(); 
    // 줄 바꿈체크
    const nbspCheck = checkTarget.split(nbsp).join('').trim(); 
    // 한 칸띄우기로만 이뤄져있는지 체크

    if (brCheck && nbspCheck) { 
    // 체크한 문자열중 하나라도 빈 문자열이 아니면 멈춤
      break;
    } else {
      cutIdx++; // 그게 아니면 자를 인덱스에 1더하기
    }
  }
  
  const result = stringArr.slice(cutIdx); 
  // slice는 0부터 해당 인덱스까지 자른 결과물을 리턴

  return result;
};

const trimHTMLTag = (html: string) => {
  const removeDiv = html.split('<div>').filter(str=>str).map((str) => str.split('</div>').join('').trim());
 // div 여는 태그를 먼저 문자열에서 split으로 제거,div 제거 후 빈 문자 필터
 //, 이후 나온 문자열 배열을 순회하면서 div 닫는 태그 제거
 
  const removeFrontHtml = trimHTMLTagChecker(removeDiv);
  // 앞 부분 제거

  const reverseHTMLForTrim = removeFrontHtml.reverse();
  // slice는 앞에서 부터 자르기 때문에 뒤집어서 체크
  
  const removeBackHtml = trimHTMLTagChecker(reverseHTMLForTrim);
  // 뒷 부분 제거

  const makeRightPath = removeBackHtml.reverse();
  // 체크후 다시 뒤집어주고

  return makeRightPath.map((str) => `<div>${str}</div>`).join(''); 
  // 잘라서 나온 문자열을 div태그로 감싸고 string으로 만들어주기
};

 

물론 정규식을 이용해서 <div>와 </div>사이에 있는 문자열을 뽑아낼 수 있으면 좋겠지만, 조건부로 첫 줄은 div에 감싸지지 않고 들어올 때도 있기도 해서 쉽지않았다.

 

일단 급한대로 이렇게 처리하고 나중에 리팩토링을 진행하려 한다~