HTML 태그 제거 텍스트만 남기는 코드

웹 컨텐츠를 복사해야 할 일이 있을때 컨텐츠 복사 금지 코드가 적용되어 있을때 이용할 수 있는 방법입니다. 

 

저도 필요에 의해 고민하고 찾아봐서 알게 된 코드에요.

 

여러분들도 혹시 저와 같은 고민을 하게 되셨을 경우 도움이 되었으면 합니다. 

 

조만간 해당 코드를 활용하여 텍스트 결과를 바로 확인할 수 있는 간단한 웹앱을 만들어 보도록 하겠습니다. 

 

반응형

 

HTML 태그 제거

우선 HTML 태그를 복사합니다. 

 

그리고 콘솔창에 아래의 코드를 입력해주세요. 

 

// 해당작업을 계속하기 위해서 let 사용
let str = "HTML 태크"

str.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/gi, "");

 

 

줄바꿈 제거

위의 코드로 HTML 태그를 제거하지만 "\n" 이라는 줄바꿈 코드가 적용되어있을 수 있습니다. 

 

위의 코드만 적용하여 하나하나 제거해도 물론 괜찮지만... 조금더 편리하게 하기 위해 해당 코드를 삭제하는 코드를 적용해봅니다. 

 

let txt = str.split("\n").join("");

 

 

편리하게 함수로 만들어서 사용해보기

위의 HTML 태그를 제거하는 코드를 한데 뭉쳐서 함수로 만들면 더욱 편리해질거 같습니다. 

 

function tagsToStr(str) {
	const txt = str.replace(/<\/?("[^"]*"|'[^']*'|[^>])*(>|$)/gi, "");
	const repStr = txt.split("\n").join(""); 

    return repStr;
}

 

개선해야 할 점

위의 코드대로 할 경우 "&nbsp" 문자열이 삭제 되지 않습니다. 

 

티스토리의 HTML 모드에 붙여넣는다면 띄어쓰기로 변환되어 괜찮지만 에디터에서 그대로 사용할 경우 해당 문자열이 출력되는데...

 

또 replace 사용해서 제거하자니 복잡하기도 하고 해서 일단 놔뒀습니다. 

 

조금더 좋은 방향이 있다면 내용추가해볼께요.~