투케이2K

559. (javaScript) 자바스크립트 정규식 test() 사용해 올바르지 않은 JSON 특수 문자 따옴표 포함 여부 체크 및 replace 치환 수행 본문

JavaScript

559. (javaScript) 자바스크립트 정규식 test() 사용해 올바르지 않은 JSON 특수 문자 따옴표 포함 여부 체크 및 replace 치환 수행

투케이2K 2026. 6. 24. 18:55
728x90
반응형

[개발 환경 설정]

개발 툴 : Edit++ / Vscode

개발 언어 : JavaScript

 

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / test / JSON


- 사전) 👉 자바스크립트 test() 간략 설명 : 

  >> test() 함수는 보통 정규표현식(RegExp) 객체에서 가장 많이 사용하는 메서드입니다.

  >> test() 함수는 문자열이 특정 정규식 패턴을 만족하는지 검사하고 결과를 true 또는 false 로 반환하는 함수입니다.

  >> test() 함수 기본 문법 : 

    const regex = /패턴/;
    const result = regex.test("검사할 문자열");

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      }

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // ------------------------------------------------------
          // 🟦 [test() 간략 설명]
          // ------------------------------------------------------
          // 1. test() 함수는 보통 정규표현식(RegExp) 객체에서 가장 많이 사용하는 메서드입니다.
          // ------------------------------------------------------
          // 2. test() 함수는 문자열이 특정 정규식 패턴을 만족하는지 검사하고 결과를 true 또는 false 로 반환하는 함수입니다.
          // ------------------------------------------------------
          // 3. test() 함수 기본 문법 : 
          // 
          // const regex = /패턴/;
          // const result = regex.test("검사할 문자열");
          // ------------------------------------------------------

          
          // ------------------------------------------------
          // 🟦 올바르지 않은 JSON 데이터 생성 수행
          // ------------------------------------------------  
          let jsonData = `{
            “name” : “twok”
          }`;

          console.log("jsonData : ", jsonData);

          
          // ------------------------------------------------
          // 🟦 JSON 데이터 파싱 수행
          // ------------------------------------------------ 
          try {
            const data = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;            
          } 
          catch (error) {
            console.error('json parsing exception : ', error);

            // ------------------------------------------------
            // 🟦 JSON 데이터에서 올바르지 않은 문자열 포함 확인 및 replace 사용해 변경 실시
            // ------------------------------------------------ 
            if (/[“”]/.test(jsonData) || /[‘’]/.test(jsonData)){
              
              jsonData = jsonData
                  .replace(/[“”]/g, '"') // 스마트 큰따옴표 -> 치환
                  .replace(/[‘’]/g, "'"); // 스마트 작은따옴표 -> 치환

              try {
                const validation = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;

                console.log("json validation success : ", JSON.stringify(validation));
              }
              catch (e){
                console.error('json validation exception : ', e);
              }
            }

          }


          // ------------------------------------------------
          // 🟦 로그 출력 예시
          // ------------------------------------------------ 
          /*
          jsonData :  {
            “name” : “twok”
          }
          
          json parsing exception :  SyntaxError: Expected property name or '}' in JSON at position 14 (line 2 column 13)
              at JSON.parse (<anonymous>)
          
          json validation success :  {"name":"twok"}
          */
          // ------------------------------------------------ 

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };


    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [간단 소스] 자바스크립트 getMacFormat - 맥 주소 (Mac Address) 형식에 맞게 세미콜론 자릿수 포맷 함수

https://kkh0977.tistory.com/8753

https://blog.naver.com/kkh0977/224244331654


▶️ [test() 함수 사용해 특정 문자열 패턴을 포함하는지 확인 실시 - 정규식 , 문자열 패턴]

https://kkh0977.tistory.com/1846

https://blog.naver.com/kkh0977/222732607207?trackingCode=blog_bloghome_searchlist


▶️ [간단 소스] 자바스크립트 이메일 형식 유효성 검증 정규식 생성 및 test() 함수 사용해 정규식 일치 여부 확인 - @ 뒤에 점 다중 허용 처리

https://kkh0977.tistory.com/8673

https://blog.naver.com/kkh0977/224207113183?trackingCode=blog_bloghome_searchlist


▶️ [정규식 (RegEx) 을 사용해서 지정한 특정 패턴 문자 제거 실시 - 특수문자 및 공백제거]

https://kkh0977.tistory.com/1099

https://blog.naver.com/kkh0977/222463874583?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
Comments