아래 정규표현식은 html 태그를 제거하기 위한 식으로 모든 태그를 제거함.
html 태그가 포함된 src라는 문자열에서 <tag></tag>를 '' 빈 문자열로 치환해 줌.
const extractTextPattern = /(<([^>]+)>)/gi;
모든 태그 제거하기
<div id="target">
<h1>This Content is target</h1>
<span>to replace</span>
.
</div>
아래 코드로 위의 #target 엘리먼트를 innerHTML을 통해 하위 모든 문자열을 불러온 후 담은 태그들을 제거할 것임.
let target = document.getElementById('target');
let src = target.innerHTML;
console.log( src );
/**
* ->
* <h1>This Content is target</h1>
* <span>to replace</span>
* .
*/
let extractedText = src.replace(extractTextPattern, '');
console.log( extractedText );
/**
* ->
* This Content is target
* to replace
* .
*/
모든 태그 요소가 제거되어 안의 텍스트만 꺼낼 수 있음.
원하는 태그만 제거하는 방법
모든 태그가 아닌 내가 원하는 태그만 선택하여 제거하는 방법도 있음.
h1 태그만 없애고 싶다면, 다음 패턴을 사용하면 됨.
const extractSpanPattern = /<(\/h1|h1)([^>]*)>/gi;
let eraseSpan = src.replace(extractSpanPattern, '');
console.log( eraseSpan );
/**
* ->
* This Content is target
* <span>to replace</span>
* .
*/
script 태그와 javascript 소스까지 제거하는 패턴
종종 script 태그와 js 소스까지 지워야 하는 경우도 있음.
이럴 경우에는 패턴을 다음과 같이 사용하면 됨.
const jsPttrn = /<script[^>]*>((\n|\r|.)*?)<\/script>/gim;
참고로 css 태그와 css 소스까지 지우고 싶다면,
const cssPttrn = /<style[^>]*>((\n|\r|.)*?)<\/style>/gim;
플래그를 사용한 정규표현식 고급 사용법
정규 표현식은 여섯 개의 옵션이 있음. 이를 통해 전역 검색 또는 대소문자 구분 없는 검색등을 할 수 있음.
| options |
description |
| g |
전역검색. 종종 g 옵션을 몰라서 replaceAll이라는 함수를 새로 만들어 사용한 코드도 있음. |
| i |
대소문자 구분 없는 검색 |
| m |
다중행 (multiline) 검색 |
| s |
. 에 개항 문자 매칭 (ES2018) |
| u |
패턴을 유니코드 코드 포인트의 나열로 취급합. |
| y |
'sticky' 검색 수횅. 문자열의 현재 위치부터 검색을 수행함. |
