Dev Log Island

아래 정규표현식은 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;

플래그를 사용한 정규표현식 고급 사용법

정규 표현식은 여섯 개의 옵션이 있음. 이를 통해 전역 검색 또는 대소문자 구분 없는 검색등을 할 수 있음.

• 참고 MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
• 온라인 연습 https://regexr.com/