検索/ハイライトクリック - >既存のdivが既存のスパンでラップされる

Question

JavaScriptの検索とハイライトテキストに問題があります。 たとえば、既存の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; 
} 

チェック問題：JSfiddle

Answer 1

をさて、あなたはこの行にinnerHTMLからすべての</span>タグを削除する：

より良い私は、問題を示すために、JSのフィドルを作成していることを説明するために

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

また、</span>は.glyphiconです。これが要素がラップされる理由です。

Btw：例外がスローされます。ReferenceError: highlightSearch is not defined