웹개발 기능대회 검색어 하이라이트 기능 질문입니다.

[권보령]

안녕하세요
덕분에 완강까지 왔습니다 항상 도움에 감사드립니다

웹개발 기능대회 장바구니 기능을 구현하고 있는데
검색어 하이라이트 기능이 도저히 안 풀립니다

let products = [];

$.get('store.json')
.then((data)=>{

  products = data.products;

  data.products.forEach((a) => {

    let html = `
        <div class="container">
            <div class="item" draggable="true" data-id="${a.id}">
            <div class="image">
                < img src="${a.photo}" alt="" style="width: 200px; height: 150px;">
            </div>
            <div class="top">
                <div class="title">${a.title}</div>
                <div class="company">${a.brand}</div>
            </div>
            <div class="price">가격: ${a.price}</div>
                <button data-id="${a.id}" class="cartBtn">Add to Cart</button>
            </div>
        </div> `;

        $('.card').append(html)
    });

    // 검색어 기능
    document.getElementById('search').addEventListener('input', function() {
    
        let search = document.getElementById('search').value;

        for (let i = 0; i < products.length; i++) {
            if (products[i]['title'].includes(search) || products[i]['brand'].includes(search)) {
                document.getElementsByClassName('container')[i].classList.remove('hide')
                
                let highlightedTitle = products[i]['title'].replace(new RegExp(search, 'gi'), match => `<span class="highlight">${match}</span>`);
                document.getElementsByClassName('title')[i].innerHTML = highlightedTitle;

                let highlightedBrand = products[i]['brand'].replace(new RegExp(search, 'gi'), match => `<span class="highlight">${match}</span>`);
                document.getElementsByClassName('company')[i].innerHTML = highlightedBrand;

            } else {
                document.getElementsByClassName('container')[i].classList.add('hide');
            }
        }
    });
});

저 굵게 처리한 코드가 문제의 코드인데
검색 시에는 정상적으로? 하이라이트 처리가 됩니다.



그런데 검색어를 다시 지우면 이 꼴이 되는데 대체 왜 이런걸까요
해결 방법을 모르겠습니다..........

[codingapple]

아마 span태그같은게 남아있어서 그런게 아닐까요 개발자도구켜서 확인해봅시다

[글쓴이]

글