vue.js v-html을 이용한 문자열에서 특정 글자색 바꾸기

vue.js로 문자열에서 특정 글자의 글자색을 바꿔야 하는 일이 생겼다. 

원하는 글자를 span tag로 감싼뒤 style로 color를 주기로 했다.

 

 

우선 text는 computed로 받아오는 구조이다. (vue 2.0)

computed에서 정규식을 통해 특정 글자를 찾고, 이를 span tag를 감싼다.

최종적으로 v-html을 통해 text를 출력한다..

 

v-html 이란?

v-text	innerText 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남.
v-html	innerHtml 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄.

(XSS 공격 등에 취약함. 꼭 필요한 경우가 아니면 v-text 를 사용 추천.)

 

 

 

__ 간단 예시__

 

text 에서 target의 글자색만 red로 바꾸기.

<template>
	<div v-html="getText"></div>
</template>
...


computed() {
    getText() {
    let text = "example target example"
    text.replaceAll("target", " <span style='color: red'>target</span>")
    return text

    }
}