[TIL] 09.10 text 에 <span/>,<br/> 태그 입히기

text 로 불러오는 문장에서 []로 감싸진 부분을 하이라이트 해주고 n 문자가 오면 엔터를 걸어 주어야 했다. 
3가지 방법을 고민을 했는데 

 

1. react에서 제공해주는 dangerousHtml 메서드를 사용하는 방법.
 - text를 DB에 저장할때 [] 대신 <span> 태그로 n 대신 <br> 태그를 같이 넣어준다. 

 - DangerousHtml 컴포넌트를 만들어 해당 컴포넌트로 text 값을 넘겨주어 dangerousHtml메서드를 이용하여 변환 시켜준다.

 - DangerousHtml 컴포넌트 css 파일에 span 태그는 font-weight과 color 가 적용 되도록 만들어 준다. 

span {
 font-weight: bold
 color: green
}

    ex) 안녕하세요 <span> 개발자 <span/> <br/> 입니다.  

         => 안녕하세요 개발자

              입니다.

위의 예처럼 변경이 될것이다. 

 

2. [], n 을 태그로 변환하는 함수를 만드는 방법이다. 

const contentMapping = (content: string) => {
	let resultNode:ReactNode[] = []
	let start = 0

	for(let i = 0; i < content.length; i++){
		if(content[i] === "n"){
			let text = content.slice(start, i)
			resultNode.push(<span>{content.slice(start, i)}<br/></span>)
			start = i+1;
		}

		if(content[i] === "[") {
			let text = content.slice(start, i)
			resultNode.push(<span>{text}</span>)
			start = i+1;
		}

		if(content[i] === "]") {
			let text = content.slice(start, i)
			resultNode.push(<span className={cx('highlight')}>{text}</span>)
			start = i+1
		}

		if(i === content.length) {
			let text = content.slice(start, i)
			resultNode.push(<span>{text}</span>)
		}
	}

	return resultNode;
};

코드를 리팩토링 할 필요가 있을거 같다. 

 

3. 정규 표현식을 사용하는 방법 

const coverText = (content: string) => {
	const convertTextArr:ReactNode[] = [];
	const regxp = /(?<=\[).+?(?=\])/;
	
	const splitText = content.split("n");
	splitText.map(text => {
		if(text.match(regxp)) {
			convertTextArr.push(
				<span className={cx('highlight')}>
					{text.match(regxp)![0]}	
				</span>
			)
		} else {
			convertTextArr.push(text)
		}
	})
	return convertTextArr;
};

위의 코드의 경우 n 이 없을경우 강조되는 문장만 출력 되어버려서 사용할 수 없는 함수이다. 

matchAll 을 사용하여 해당 되는 값들을미리 뽑아서 변경시켜 보려 했지만 잘 되지 않았다. 

 

2번의 방법으로 진행을 할 예정인데 반복되는 코드를 줄이고 좀 더 깔끔한 코드로 만들어 보려고 한다.