문자열 내의 HTML태그를 모두 없애는 방법.

웹 사이트 이용자에게 본문의 일부 영역을 자동으로 '발췌'하여 보여주고 싶은 경우가 있다. 이 때 보통 발췌할 문자열의 문자 갯수를 지정하여 해당 본문에서 잘라오는데, 혹 이 영역 안에 HTML 태그가 있어 당황했던 적은 없었는지?

예를 들어 잘라오고 싶은 영역 안에 <a href="/index.asp">...</a>와 같이 하이퍼링크 태그가 들어 있는데 공교롭게 이 태그의 중간에서 잘리는 경우를 들 수 있다. 본문에서 링크, 문장/단어 꾸미기 등을 위해 HTML 태그를 사용하는데 보통 이 태그가 데이터베이스에 같이 저장된다. 이 경우 자동으로 문자열을 가지고올 때 이 태그 문자열도 본문의 문자열로 같이 인식이 되기 때문에 언제든 HTML 태그의 일부가 잘리는 문제가 발생할 수 있다.

이 문제를 해결하는 방법중 하나는 가지고 올 문자열의 HTML 태그를 모두 없애 버리고 계산을 하게 하는 것이다.

우선 아래 예제를 살펴보자. "HTML 태그 없애고 보여주기" 버튼을 클릭하면 텍스트 상자에 들어 있는 본문의 HTML 태그를 모두 없앤 문자열을 보여줄 것이다.

<FORM name=myForm>

</FORM>

이 문제를 해결하기 위한 가장 간단한 방법은 레귤러 익스프레션(정규 표현식, Regular Expression)을 이용하는 것이다.

위 예제에 대한 자바스크립트 코드는 다음과 같다.

<script> function stripHTMLtag(string) {    var objStrip = new RegExp();    objStrip = /[<][^>]*[>]/gi;    return string.replace(objStrip, ""); } </script>

위 stripHTMLtag 자바스크립트 함수는 전형적인 정규 표현식 예제이다. 우선 objStrip 변수에 new RegExp()를 이용하여 정규 표현식 객체를 생성한다. 이후 이 객체 변수에 문자열 내에서 검색할 정규 표현식을 할당한다. 여기서는 <...> 태그를 모두 찾는다. 이때 /gi 옵션은 전체에서 대소문자 구분 없이 찾는 것을 의미한다. (g=global / i=insensitive) 이렇게 정규 표현식을 통해 조건에 맞는 문자열을 찾은 후 해당 문자열을 ""(빈 문자열)로 대치시키는게 이 함수의 주 역할이다.

위 텍스트 상자와 'HTML 태그 없애고 보여주기' 버튼에 대한 코드는 다음과 같다.

<form name="myForm">     <p><textarea name="myText" rows="3" cols="60">본문 영역...<a href="/index.asp"><font color="blue">특정 단어</font></a> 본문 영역 끝...</textarea></p>     <p><input type="button" name="myButton" onClick="alert(stripHTMLtag(document.myForm.myText.value))" value="HTML 태그 없애고 보여주기"></p> </form>

----------------------------------------------------------------------

출처: 셀클럽 - http://sellclub.co.kr

다른곳에서 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.