JAVA 정규표현식 replace (Vue 다국어 동적 적용)

Vue의 다국어 적용

Vue에서 다국어 적용을 위해 {{ $t("") }}문법을 사용합니다.

 

{{ ... }}는 Vue.js 템플릿 문법에서 표현식(expression)을 사용할 때 사용되는 구문으로, 표현식은 Vue.js 인스턴스의 데이터(data)와 연결되어 동적으로 렌더링될 값이나 로직을 나타내는 것이 가능합니다.

$t("")은 템플릿 내에서 텍스트의 다국어 변환을 위해 사용되는 헬퍼 함수(helper function)입니다. $는 Vue.js에서 전역적으로 사용되는 다국어 변환 객체(Translation Object)를 가리키는 변수로, 이를 통해 다국어 변환을 수행할 수 있습니다. $("")는 빈 문자열에 해당하는 다국어 변환을 수행하는 것을 의미하며, 여기에 실제 다국어 문자열을 넣어주면 해당 다국어로 변환된 텍스트가 렌더링됩니다.

 

템플릿에 동적으로 다국어 적용

다국어를 적용할 컴포넌트에 미리 multi-language라는 속성을 넣어 두고 텍스트 부분을 replace하는 코드입니다.

만약 미리 넣어둔 속성이 없다면 label이나 button등 text가 있는 요소로 구분할 수도 있습니다.

<!-- 수정 전 -->
<label name="someText" multi-language='true'>someText</label>
<!-- 수정 후-->
<label name="someText" multi-language='true'>{{ $t(someText) }}</label>

  private String convertMultiLanguage(String html) {
    // replace component
    Pattern p = Pattern.compile("multi-language=\"true\".*?>(.*?)</");
    Matcher m = p.matcher(html);

    while (m.find()) {
      String orgString = m.group();
      Pattern p2 = Pattern.compile(">(.*?)<");
      Matcher m2 = p2.matcher(orgString);
      
      while (m2.find()) {
        String originalText = m2.group(1); // (.*?)에 해당하는 그룹 가져오기
        String replacement = ">{{ $t(\"" + originalText + "\") }}<"; // 원래의 문자열을 포함하여 원하는 형식으로 대체
        String replacedString = orgString.replace(">"+originalText+"<", replacement);
        html = html.replace(orgString, replacedString);
      }
    }
    return html;
  }

위의 코드는 orgString 변수의 문자열에서 >(.*?)< 패턴에 해당하는 (.*?)에 해당하는 그룹인 someText같은 문자열을 찾아, 이를 originalText 변수에 저장하여 원하는 형식으로 대체한 뒤, replacedString에 저장합니다.

 

* 정규 표현식

.*?는 정규 표현식에서 사용되는 패턴으로, 다음과 같이 해석될 수 있습니다.

.: 어떤 문자 하나와 일치합니다. 단, 개행 문자를 제외한 모든 문자와 일치합니다.
*: 앞의 패턴이 0회 이상 반복될 수 있습니다.
?: 앞의 패턴이 가능한 한 가장 적게 일치하도록 만듭니다. 이를 "게으른(non-greedy)" 또는 "최소 일치(minimal match)"라고도 합니다.
따라서 (.*?)는 0개 이상의 문자들이 가능한 한 가장 적게 일치하는 패턴을 나타내며, 이를 "최소 일치(non-greedy)" 모드로 동작하도록 합니다. 즉, 해당 패턴에 대응하는 문자열 중에서 가장 짧은 부분에만 일치하게 됩니다.

예를 들어, 다음과 같은 문자열이 있다고 가정하겠습니다.

<div>someText1</div><p>someText2</p>

>(.*?)< 패턴은 >와 < 사이에 있는 최소 일치하는 문자열에 대응합니다. 첫 번째 <div> 태그에서는 someText1에 대응하고, 두 번째 <p> 태그에서는 someText2에 대응하게 됩니다. .*? 패턴이 최소 일치(non-greedy) 모드로 동작하므로, 각 태그의 내용에 대해 가능한 한 가장 적게 일치하는 문자열에만 대응하게 됩니다.