공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/JavaScript

단어강조

serpiko 2021. 5. 3. 17:50

단어강조

 

 

정해진 키워드가 입력되면 색상으로 강조

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
      .float {
        float: left;
      }
      .float + .float {
        margin-left: 50px;
      }
      #editor {
        width: 700px;
        height: 550px;
        padding: 10px;
        font-size: 14px;
        background-color: #444;
        color: white;
        margin-bottom: 10px;
      }
      input[type="text"] {
        width: 400px;
      }
      .input-container + .input-container {
        margin-top: 20px;
      }
      .statement_0,
      input[name="input0"] {
        color: #ccc000;
      }
      .statement_1,
      input[name="input1"] {
        color: #ff0033;
      }
      .statement_2,
      input[name="input2"] {
        color: #6666ff;
      }
      .statement_3,
      input[name="input3"] {
        color: #9933cc;
      }
      .statement_4,
      input[name="input4"] {
        color: #009966;
      }
      .statement_5,
      input[name="input5"] {
        color: #0066cc;
      }
      .statement_6,
      input[name="input6"] {
        color: #330066;
      }
      .statement_7,
      input[name="input7"] {
        color: #330000;
      }
      .statement_8,
      input[name="input8"] {
        color: #ffcc33;
      }
      .statement_9,
      input[name="input9"] {
        color: #cc00cc;
      }
      .statement_10,
      input[name="input10"] {
        color: #006600;
      }
      .statement_11,
      input[name="input11"] {
        color: #0000ff;
      }
      .statement_12,
      input[name="input12"] {
        color: #330099;
      }
      .statement_13,
      input[name="input13"] {
        color: #009900;
      }
      .statement_14,
      input[name="input14"] {
        color: #cc0099;
      }
      button {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="float">
      <div id="editor" contenteditable="true">
        About 루니툰 정품 ♡ 꾸안꾸룩, 홈웨어룩으로 활용하기 좋은 맨투맨 반바지
        트레이닝 세트를 소개할게요 :)   드롭된 숄더라인과 여유있게 넉넉한
        가오리핏의 맨투맨과 전체 허리밴딩으로 바디에 편안하게 핏되는 밴딩
        반바지가 세트로 구성된 트레이닝이에요.   러블리한 루니툰 캐릭터들로
        사랑스러운 포인트는 up! 간편한 트레이닝 룩부터 집앞 마실룩, 캠핑룩
        등으로  가볍고 편안하게 스타일링을 완성해주구요, 세트로도 완성도 있는
        캐주얼룩 연출에도 좋지만 각각 따로 다양한 상의,하의와 매치해
        활용해주셔도 좋아요 ♡   사랑스러운 옐로우, 핑크 두 컬러 구성으로
        준비했구요, 취향따라 초이스하실 수 있으니 놓치지마세요 :) TIP 원단
        특성상 물세탁시 수축이나 변형의 가능성이 있어, 전체 세탁은
        드라이클리닝을 권장합니다. size tip 44~77까지 착용 가능한 FREE
        사이즈예요. ( 상세 사이즈는 밑단 하단을 참고 해주세요 ) color
        옐로우(yellow) 핑크(pink) 네이비(navy) 잇수다 베스트 상품 모두 보러가기
        ?? https://shopping.naver.com/style/style/stores/1000020042 잇수다 Best
        ?? 유사한 상품 ?? // 옐로우(yellow) 사랑스러운 루니툰 캐릭터들로 포인트
        있게 - ♡ 전체 허리밴딩으로 편안한 착용감을 느낄 수 있어요 :) //
        핑크(pink) 산뜻한 봄 기운이 느껴지는 핑크 컬러로 데일리 캐주얼룩을
        완성해보세요 :) // 네이비(navy) Detail Info *모니터의 각도와 해상도에
        따라, 제품의 색상 차이가 있을 수 있습니다. *촬영장소의 조명과 빛에따라
        제품색상이 왜곡될 수 있으니, 디테일 촬영 사진의 컬러를 참고
        부탁드립니다. // 핑크(pink) ⭐ 루니툰 정품 입니다 ⭐ 미운 군살들을
        커버해줄 넉넉한 가오리핏으로 사이즈 여유있게 착용 가능해요 ! Fabric ·
        원단 - 면65%, 폴리35% · 핏 - 슬림핏 □ / 기본핏 □ / 루즈핏 □ / 오버핏 ■ ·
        두께 - 얇음 ■ / 중간 □ / 두꺼움 □ · 신축성 - 있음 ■ / 없음 □ · 비침 -
        있음 □ / 약간있음 □ / 없음 ■ · 안감 - 있음 □ / 없음 ■ Size FREE 상의 -
        총장63, 어깨82, 가슴78, 밑단50, 암홀26, 소매길이50, 소매단면10 하의 -
        총장32, 허리33, 엉덩이52.5, 허벅지33.5, 밑위33.5, 밑단33 ( 사이즈 재는
        위치와 사람에 따라 1-3 cm 차이가 있을 수 있습니다 ) Delivery - 배송기간
        : 2~4일 소요 (주말제외) - 주문량이 많은 상품일 경우, 최대 7~10일까지
        소요될 수 있으니, 급하게 받아보셔야하는 상품은 구매전 미리 1:1 톡톡문의
        부탁드립니다. - 택배사 : 우체국택배 - 배송비 : 무료 (단, 제주도
        산간지역일 경우 추가비용 발생 : 5,000원)
      </div>
      <button type="button" id="wordbtn">분석하기</button>
    </div>
    <div class="float">
      <div class="input-container">
        0감성&nbsp;<input type="text" name="input0" value="" />
      </div>
      <div class="input-container">
        1계절&nbsp;<input type="text" name="input1" value="" />
      </div>
      <div class="input-container">
        2기장&nbsp;<input type="text" name="input2" value="" />
      </div>
      <div class="input-container">
        3목적&nbsp;<input type="text" name="input3" value="" />
      </div>
      <div class="input-container">
        4무게&nbsp;<input type="text" name="input4" value="" />
      </div>
      <div class="input-container">
        5분류&nbsp;<input type="text" name="input5" value="" />
      </div>
      <div class="input-container">
        6사이즈&nbsp;<input type="text" name="input6" value="" />
      </div>
      <div class="input-container">
        7색상&nbsp;<input type="text" name="input7" value="" />
      </div>
      <div class="input-container">
        8소재&nbsp;<input type="text" name="input8" value="" />
      </div>
      <div class="input-container">
        9스티치&nbsp;<input type="text" name="input9" value="" />
      </div>
      <div class="input-container">
        10연령&nbsp;<input type="text" name="input10" value="" />
      </div>
      <div class="input-container">
        11특성&nbsp;<input type="text" name="input11" value="" />
      </div>
      <div class="input-container">
        12패턴&nbsp;<input type="text" name="input12" value="" />
      </div>
      <div class="input-container">
        13형태&nbsp;<input type="text" name="input13" value="" />
      </div>
    </div>
    <script>
      // 2021.04.30 허정진
      let keywords = [
        {
          category: 0,
          words: [
            "기본",
            "꾸안꾸",
            "넉넉한",
            "데일리",
            "디테일",
            "러블리",
            "보세",
            "산뜻한",
            "스타일",
            "캐주얼",
            "편한",
            "간편한",
          ],
        },
        { category: 1, words: ["봄"] },
        { category: 2, words: [""] },
        { category: 3, words: ["마실룩", "집앞", "트레이닝", "홈웨어"] },
        { category: 4, words: [""] },
        {
          category: 5,
          words: ["맨투맨", "반바지", "베스트", "상의", "세트", "숄", "하의"],
        },
        { category: 6, words: [""] },
        { category: 7, words: ["네이비", "옐로우", "핑크"] },
        { category: 8, words: [""] },
        { category: 9, words: ["캐릭터"] },
        { category: 10, words: [""] },
        {
          category: 11,
          words: [
            "밴딩",
            "비침",
            "슬림",
            "슬림핏",
            "신축성",
            "안감",
            "오버핏",
            "착용감",
          ],
        },
        { category: 12, words: [""] },
        { category: 13, words: ["가오리", "루즈", "루즈핏", "밑단", "소매"] },
      ];
      //
      $("#wordbtn").click(wordAnalysis);
      //
      function wordAnalysis(e) {
        //
        const $editor = $("#editor");
        let newHTML = "";
        const keywordsMap = [];
        //
        keywords.forEach((obj) => {
          obj.words.forEach((v) => {
            if (0 < v.length) {
              keywordsMap.push(v);
            }
          });
        });
        //
        console.log(keywordsMap);
        const regexFromMyArray = new RegExp(keywordsMap.join("|"), "ig");
        newHTML = $editor.html().replace(regexFromMyArray, (str) => {
          let categoryIndex;
          keywords.forEach((obj) => {
            obj.words.forEach((v, i) => {
              if (str === v) {
                categoryIndex = obj.category;
                let $input = $(`input[name='input${categoryIndex}']`);
                if (0 < i) v = $input.val() + ", " + v;
                $input.val(v);
              }
            });
          });
          return `<span class="statement_${categoryIndex}">${str}</span>`;
        });
        //
        $editor.html(newHTML);
        //
        const child = $editor.children();
        const range = document.createRange();
        const sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        this.focus();
      }
    </script>
  </body>
</html>

 

더보기

코드 복사하기

 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <style>

      .float {

        float: left;

      }

      .float + .float {

        margin-left: 50px;

      }

      #editor {

        width: 700px;

        height: 550px;

        padding: 10px;

        font-size: 14px;

        background-color: #444;

        color: white;

        margin-bottom: 10px;

      }

      input[type="text"] {

        width: 400px;

      }

      .input-container + .input-container {

        margin-top: 20px;

      }

      .statement_0,

      input[name="input0"] {

        color: #ccc000;

      }

      .statement_1,

      input[name="input1"] {

        color: #ff0033;

      }

      .statement_2,

      input[name="input2"] {

        color: #6666ff;

      }

      .statement_3,

      input[name="input3"] {

        color: #9933cc;

      }

      .statement_4,

      input[name="input4"] {

        color: #009966;

      }

      .statement_5,

      input[name="input5"] {

        color: #0066cc;

      }

      .statement_6,

      input[name="input6"] {

        color: #330066;

      }

      .statement_7,

      input[name="input7"] {

        color: #330000;

      }

      .statement_8,

      input[name="input8"] {

        color: #ffcc33;

      }

      .statement_9,

      input[name="input9"] {

        color: #cc00cc;

      }

      .statement_10,

      input[name="input10"] {

        color: #006600;

      }

      .statement_11,

      input[name="input11"] {

        color: #0000ff;

      }

      .statement_12,

      input[name="input12"] {

        color: #330099;

      }

      .statement_13,

      input[name="input13"] {

        color: #009900;

      }

      .statement_14,

      input[name="input14"] {

        color: #cc0099;

      }

      button {

        width: 100%;

      }

    </style>

  </head>

  <body>

    <div class="float">

      <div id="editor" contenteditable="true">

        About 루니툰 정품 ♡ 꾸안꾸룩, 홈웨어룩으로 활용하기 좋은 맨투맨 반바지

        트레이닝 세트를 소개할게요 :)   드롭된 숄더라인과 여유있게 넉넉한

        가오리핏의 맨투맨과 전체 허리밴딩으로 바디에 편안하게 핏되는 밴딩

        반바지가 세트로 구성된 트레이닝이에요.   러블리한 루니툰 캐릭터들로

        사랑스러운 포인트는 up! 간편한 트레이닝 룩부터 집앞 마실룩, 캠핑룩

        등으로  가볍고 편안하게 스타일링을 완성해주구요, 세트로도 완성도 있는

        캐주얼룩 연출에도 좋지만 각각 따로 다양한 상의,하의와 매치해

        활용해주셔도 좋아요 ♡   사랑스러운 옐로우, 핑크 두 컬러 구성으로

        준비했구요, 취향따라 초이스하실 수 있으니 놓치지마세요 :) TIP 원단

        특성상 물세탁시 수축이나 변형의 가능성이 있어, 전체 세탁은

        드라이클리닝을 권장합니다. size tip 44~77까지 착용 가능한 FREE

        사이즈예요. ( 상세 사이즈는 밑단 하단을 참고 해주세요 ) color

        옐로우(yellow) 핑크(pink) 네이비(navy) 잇수다 베스트 상품 모두 보러가기

        ?? https://shopping.naver.com/style/style/stores/1000020042 잇수다 Best

        ?? 유사한 상품 ?? // 옐로우(yellow) 사랑스러운 루니툰 캐릭터들로 포인트

        있게 - ♡ 전체 허리밴딩으로 편안한 착용감을 느낄 수 있어요 :) //

        핑크(pink) 산뜻한 봄 기운이 느껴지는 핑크 컬러로 데일리 캐주얼룩을

        완성해보세요 :) // 네이비(navy) Detail Info *모니터의 각도와 해상도에

        따라, 제품의 색상 차이가 있을 수 있습니다. *촬영장소의 조명과 빛에따라

        제품색상이 왜곡될 수 있으니, 디테일 촬영 사진의 컬러를 참고

        부탁드립니다. // 핑크(pink) ⭐ 루니툰 정품 입니다 ⭐ 미운 군살들을

        커버해줄 넉넉한 가오리핏으로 사이즈 여유있게 착용 가능해요 ! Fabric ·

        원단 - 면65%, 폴리35% · 핏 - 슬림핏 □ / 기본핏 □ / 루즈핏 □ / 오버핏 ■ ·

        두께 - 얇음 ■ / 중간 □ / 두꺼움 □ · 신축성 - 있음 ■ / 없음 □ · 비침 -

        있음 □ / 약간있음 □ / 없음 ■ · 안감 - 있음 □ / 없음 ■ Size FREE 상의 -

        총장63, 어깨82, 가슴78, 밑단50, 암홀26, 소매길이50, 소매단면10 하의 -

        총장32, 허리33, 엉덩이52.5, 허벅지33.5, 밑위33.5, 밑단33 ( 사이즈 재는

        위치와 사람에 따라 1-3 cm 차이가 있을 수 있습니다 ) Delivery - 배송기간

        : 2~4일 소요 (주말제외) - 주문량이 많은 상품일 경우, 최대 7~10일까지

        소요될 수 있으니, 급하게 받아보셔야하는 상품은 구매전 미리 1:1 톡톡문의

        부탁드립니다. - 택배사 : 우체국택배 - 배송비 : 무료 (단, 제주도

        산간지역일 경우 추가비용 발생 : 5,000원)

      </div>

      <button type="button" id="wordbtn">분석하기</button>

    </div>

    <div class="float">

      <div class="input-container">

        0감성&nbsp;<input type="text" name="input0" value="" />

      </div>

      <div class="input-container">

        1계절&nbsp;<input type="text" name="input1" value="" />

      </div>

      <div class="input-container">

        2기장&nbsp;<input type="text" name="input2" value="" />

      </div>

      <div class="input-container">

        3목적&nbsp;<input type="text" name="input3" value="" />

      </div>

      <div class="input-container">

        4무게&nbsp;<input type="text" name="input4" value="" />

      </div>

      <div class="input-container">

        5분류&nbsp;<input type="text" name="input5" value="" />

      </div>

      <div class="input-container">

        6사이즈&nbsp;<input type="text" name="input6" value="" />

      </div>

      <div class="input-container">

        7색상&nbsp;<input type="text" name="input7" value="" />

      </div>

      <div class="input-container">

        8소재&nbsp;<input type="text" name="input8" value="" />

      </div>

      <div class="input-container">

        9스티치&nbsp;<input type="text" name="input9" value="" />

      </div>

      <div class="input-container">

        10연령&nbsp;<input type="text" name="input10" value="" />

      </div>

      <div class="input-container">

        11특성&nbsp;<input type="text" name="input11" value="" />

      </div>

      <div class="input-container">

        12패턴&nbsp;<input type="text" name="input12" value="" />

      </div>

      <div class="input-container">

        13형태&nbsp;<input type="text" name="input13" value="" />

      </div>

    </div>

    <script>

      // 2021.04.30 허정진

      let keywords = [

        {

          category: 0,

          words: [

            "기본",

            "꾸안꾸",

            "넉넉한",

            "데일리",

            "디테일",

            "러블리",

            "보세",

            "산뜻한",

            "스타일",

            "캐주얼",

            "편한",

            "간편한",

          ],

        },

        { category: 1, words: ["봄"] },

        { category: 2, words: [""] },

        { category: 3, words: ["마실룩", "집앞", "트레이닝", "홈웨어"] },

        { category: 4, words: [""] },

        {

          category: 5,

          words: ["맨투맨", "반바지", "베스트", "상의", "세트", "숄", "하의"],

        },

        { category: 6, words: [""] },

        { category: 7, words: ["네이비", "옐로우", "핑크"] },

        { category: 8, words: [""] },

        { category: 9, words: ["캐릭터"] },

        { category: 10, words: [""] },

        {

          category: 11,

          words: [

            "밴딩",

            "비침",

            "슬림",

            "슬림핏",

            "신축성",

            "안감",

            "오버핏",

            "착용감",

          ],

        },

        { category: 12, words: [""] },

        { category: 13, words: ["가오리", "루즈", "루즈핏", "밑단", "소매"] },

      ];

      //

      $("#wordbtn").click(wordAnalysis);

      //

      function wordAnalysis(e) {

        //

        const $editor = $("#editor");

        let newHTML = "";

        const keywordsMap = [];

        //

        keywords.forEach((obj) => {

          obj.words.forEach((v) => {

            if (0 < v.length) {

              keywordsMap.push(v);

            }

          });

        });

        //

        console.log(keywordsMap);

        const regexFromMyArray = new RegExp(keywordsMap.join("|"), "ig");

        newHTML = $editor.html().replace(regexFromMyArray, (str) => {

          let categoryIndex;

          keywords.forEach((obj) => {

            obj.words.forEach((v, i) => {

              if (str === v) {

                categoryIndex = obj.category;

                let $input = $(`input[name='input${categoryIndex}']`);

                if (0 < i) v = $input.val() + ", " + v;

                $input.val(v);

              }

            });

          });

          return `<span class="statement_${categoryIndex}">${str}</span>`;

        });

        //

        $editor.html(newHTML);

        //

        const child = $editor.children();

        const range = document.createRange();

        const sel = window.getSelection();

        range.setStart(child[child.length - 1], 1);

        range.collapse(true);

        sel.removeAllRanges();

        sel.addRange(range);

        this.focus();

      }

    </script>

  </body>

</html>

 

저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글

eval 대신에 Function  (0) 2022.08.19
typescript - .tsconfig.json  (0) 2022.01.12
ES6 구조 분해 할당 - Expressions Destructuring assignment  (0) 2020.11.06
두개의 배열의 값을 비교할때, 조금 더 나은방법 Array.filter (in) Array.indexOf  (0) 2020.09.13
Excel multi sheet export by Vanilla  (0) 2020.08.13
댓글