[자바스크립트] 정규표현식을 사용하여 태그만 제거하기

 

 

아래는 정규표현식을 사용한 태그의 제거 방법입니다. 태그를 제거하기 위해서 내장함수에서 태그를 지원하는 함수가 있다면 편리하겠지만 순수 자바스크립트에서는 없는 부분이기에 다른 방법이 필요합니다. 가장 간편한 방법이 바로 정규표현식을 활용하는 방법입니다.

정규표현식의 replace() 함수는 특정 문자열을 패턴에 따라 원하는 대로 수정하여 반환할 수 있습니다. 아래는 태그를 제거하기 위한 정규표현식입니다.

var newText = oriText.replace(/(<([^>]+)>)/ig,"");

위 정규표현식은 newText 변수에 기존 변수 oriText에 포함된 태그 요소만 제거하여 변환해줍니다. 만약 다음과 같은 텍스트는 아래처럼 변경되어 나타납니다.


1) 전체 태그를 모두 제거하기

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

oriText = '<div>Remove all tag</div><span>test</span>';
newText = oriText.replace(/(<([^>]+)>)/ig,"");
alert(newText);

위 예제는 모든 태그 요소를 제거합니다.


2) 태그 선택하여 제거하기, span 태그만 제거

oriText = '<span>Remove Span tag only</span>';
newText = oriText.replace(/<(\/span|span)([^>]*)>/gi,"");
alert(newText);
 
// span 태그가 제거된 'Remove Span tag only' 출력


[출처] https://webisfree.com/2015-12-22/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%ED%83%9C%EA%B7%B8%EB%A7%8C-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
60 Is there a limit of vertices in WebGL? 웹지엘의 제약사항 졸리운_곰 2017.08.16 554
59 JavaScript Performance Monitor file 졸리운_곰 2017.08.16 371
58 Monitor Rendering Performance Within Three.js file 졸리운_곰 2017.08.16 541
57 List of WebGL frameworks 졸리운_곰 2017.08.16 500
56 From Unity to Three.js file 졸리운_곰 2017.08.16 1750
55 Collada dae to three.js json convertor sample file 졸리운_곰 2017.08.16 579
54 THREE.WebGLShader: Shader couldn't compile - Chrome Version 44.0.2403.125 #6929 file 졸리운_곰 2017.08.10 556
53 Uniforms types 졸리운_곰 2017.08.10 547
52 Custom shaders with Three.JS: Uniforms, textures and lighting file 졸리운_곰 2017.08.10 699
51 WebGL and ThreeJS Using Blender Models file 졸리운_곰 2017.08.05 356
50 Importing a Modeled Mesh From Blender to Three.js file 졸리운_곰 2017.08.05 458
49 Using SketchUp Models OrcaXS edited this page on 27 Apr · 7 revisions 졸리운_곰 2017.08.05 459
48 Three.js Loading .mtl and .obj - object stays white file 졸리운_곰 2017.08.05 541
47 [three.js] How to Build a First Person Shooter in the Browser with Three.js and WebGL/HTML5 Canvas file 졸리운_곰 2017.07.22 534
46 [three.js] WebGLRenderer 졸리운_곰 2017.07.22 490
45 Clone an Object3D model from a Collada load call 졸리운_곰 2017.07.22 345
44 [three.js] Quaternion 4원수, 사원수 회전 졸리운_곰 2017.07.08 919
43 COLLADA, TinyXML, and OpenGL file 졸리운_곰 2017.07.06 502
42 [github][gist] Mouse-Picking Collada Models with THREE.js file 졸리운_곰 2017.07.06 584
41 Mouse-Picking Collada Models with three.js, Part II file 졸리운_곰 2017.07.06 338
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED