검색/강조 표시 클릭 -> 기존 div가 기존 범위로 감싸 짐

Question

자바 스크립트 검색 및 강조 텍스트에 문제가 있습니다. 예를 들어 기존의 span 요소와 기존 div 요소가 있습니다. 몇 가지 이유로 검색 버튼을 클릭하면 div 요소가 span 요소의 자식이됩니다.

function highlightSearch() { 

    $('span').removeClass('highlighted'); 
    var text = document.getElementById('query').value; 
    var query = new RegExp("(\\b" + text + "\\b(?!([^<]+)?>))", "gim"); 
    var e = document.getElementById("searchText").innerHTML; 
    var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, ""); 
    document.getElementById("searchText").innerHTML = enew; 
    var newe = enew.replace(query, "<span class='highlighted'>$1</span>"); 
    document.getElementById("searchText").innerHTML = newe; 
} 

확인 문제에 :

하는 문제를 보여주기 위해 더 나은 내가 만든 JS 바이올린을 설명하기 위해 JSfiddle

Answer 1

글쎄, 당신이 줄에 innerHTML의 모든 </span> 태그를 제거 :

var enew = e.replace(/(<span class='highlighted'>|<\/span>)/igm, ""); 

따라서 </span>은 .glyphicon입니다. 이것이 요소가 감싸는 이유입니다.

Btw : 예외가 throw됩니다. ReferenceError: highlightSearch is not defined