문장 비교

진행하는 프로젝트에서 문장을 비교해서 하이트라이트 처리해주는 기능이 필요했다.

처음엔 쌩 js로 구현을 간단하게 했지만 생각할부분이 생각보다 많이 존재했다.

 

예를 들어 

이건 A 문장 입니다
이건 B 문장 입니다

같은 형태가 동일한 문장에 대해선 

 

이건 B 문장 입니다

 

처럼 하이라이트 처리가 잘 되지만

이건 A 문장 입니다
이건 B 문장 일수도 있습니다

처럼 형태가 달라져버리면

내가 기대하는건

 

이건 B 문장 일수도 있습니다

이지만 실제론

이건 B 이건 B 문장 일수도 있습니다

 

처럼 하이라이트가 되어버린다

내가 원하는 완벽한 문장비교를 위해선 생각보다 조건을 까다롭게 잡아야 될거같았다.

하지만 그렇게 비중이 큰 기능이 아니다보니 여기에 오랜 시간을 투자하는건 시간낭비라 판단되어 라이브러리를 서칭하다가

diff 라는 라이브러리를 찾게됐다.

 

    import { diffChars } from 'diff';
    
    const highlightDiff = (text1, text2) => {
        const diff = diffChars(text1, text2);
        let highlightedText = '';

        diff.forEach((part) => {
            if (part.added) {
                highlightedText += `<span style="background:#aff7af;">${part.value}</span>`;
            } else if (!part.removed) {
                highlightedText += part.value;
            }
        });

        return highlightedText;
    };

 

간단하다. diff라이브러리에 있는 diffChars 메서드에 문장 2개를 집어넣게되면 diff객체에 값이 다음과 같이 담기게 된다

 

 

여기서 사용할 수 있는 정보는 added와 removed 두가지이다.

두가지 정보를 통해서 원하는 기능을 다음과 같이 개발할 수 있었다.