vue.js v-html 테그 <> 삭제 예방하기

v-html 로 HTML 코드를 바인드 했을때 <> 로 작성된 텍스트도 사라지는 이슈가 있다.

ex. 안녕하세요<br/> <개발자> 조민혜 입니다.

// v-html로 바인드 출력 결과
안녕하세요
조민혜 입니다.

위와같이 <개발자> 라는 테그가 사라진다. 이를 예방 하기 위해 방법을 찾던중 아래와 같은 가이드를 발견했다.

< 는 $lt, >는 \&g' 로 치환해준 후 v-html에 바인드 시키면 문제없이 출력된다.

text.replace(/</g, '&lt;').replace(/>/g, '&gt;');

아래는 위의 예제를 토대로 테그 사라짐을 예방 하기 위해 치환하며,
br테그는 html 코드의 영향을 받을 수 있도록 제외한 코드이다.

<p v-html="replaceTag(license.licenseText)" />

// br 테그 이외의 꺽세를 치환함
replaceTag(text) {
    if (text) return text.replace(/<(?!br)([^>]*)>/g, '&lt$1&gt');
    return text;
}

해당 로직으로 치환 후 바인드 한 후 결과를보면 아래와 같이 잘 나오는것을 확인 할 수 있다.

ex. 안녕하세요 <br/> <개발자> 조민혜 입니다.

// v-html로 바인드 출력 결과
안녕하세요 
<개발자> 조민혜 입니다.