見つかった単語を強調表示しているリンクの静的ページでのJQueryの検索

Question

これまでに投稿したJQuery search in static HTML page with highlighting of found wordを見てから、私が最後に探していたものが見つかりました。しかし、検索は他のHTMLタグを破るようだ。私はそれが私の正確な要求を意図していないことを知っていますが、私はいくつかの助けを求めています。

$('#searchfor').keyup(function(){ 
 
    var page = $('#all_text'); 
 
    var pageText = page.text().replace("<span>","").replace("</span>"); 
 
    var searchedText = $('#searchfor').val(); 
 
    var theRegEx = new RegExp("("+searchedText+")", "igm");  
 
    var newHtml = pageText.replace(theRegEx ,"<span>$1</span>"); 
 
    page.html(newHtml); 
 
});

#all_text span { 
 
    text-decoration: underline; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
 
<input type="text" id="searchfor" /> 
 
<ul id="all_text"> 
 
    <li><a href="/somewhere">Somewhere</a></li> 
 
    <li><a href="/somewhere-else">Over there</a></li> 
 
</ul>

検索ボックスに入力した後、それはすべての<li>タグとすべての<a>のタグを削除します。ここでは

は、HTMLのサンプルです。私はJavascriptやJqueryに大いに自信を持っていないので、自分自身でこれを理解することはできません。リストとハイパーリンクは保持する必要がありますが、表示されているテキストのみを検索する必要があります（つまり、 hrefフィールドでは検索できません）。

すべての入力を非常に高く評価しています。

Answer 1

だから私はあなたの問題を解決するには、ハイライトしたいアンカーのコンテンツだけを取得する必要があると思います。ここではjsfiddleを、次のとおりです。https://jsfiddle.net/kimaescobar/k83j7Lqv/1/ が、基本的に私は私がすべてのall_text内であること、検索もらうよりも、検索可能であるアンカーでクラスを作成しました：

Htmlの

が

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<input type="text" id="searchfor" /> 
<ul id="all_text"> 
    <li><a class="searchable" href="/somewhere">Somewhere</a></li> 
    <li><a class="searchable" href="/somewhere-else">Over there</a></li> 
</ul> 

CSSが

#all_text em { 
    text-decoration: underline; 
    background-color: yellow; 
} 

JS

$('#searchfor').keyup(function(){ 
    var $page = $('#all_text .searchable'); 
    $page.each(function(i,a){ 
     $a = $(a) 
     $a.html($a.html().replace(/<em>/g,"").replace(/\<\/em\>/g,"")) 
    }) 
    var searchedText = $('#searchfor').val(); 
    if(searchedText != ""){ 
    $page.each(function(i,a){ 
     $a = $(a) 
     var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<em>$1</em>") 
     $a.html(html) 
    }) 
    } 
}); 

obs：私はfrを変更しましたあなたが強くまたはem（あなたが望むセマンティクスに応じて）を使用するものを強調表示したいときに意味的にhtml5にあるので、emへのspan。

Answer 2

私の編集が拒否されたので。理由は全く分かりませんが、彼のコードをかなりスリムにすることができます。ここに私の編集です：

私はあなたの問題の解決策は、あなたがハイライトしたいアンカーの内容だけを取得する必要があると思います。ここにjsfiddle：jsfiddleが続きます。基本的には、アンカータグをターゲットにして、.each()関数を使用して、ユーザーが検索する内容に基づいて各アンカータグ内の内容を置き換えました。

api documentation for .each
javascripts replace function

Htmlの

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<input type="text" id="searchfor" /> 
<ul id="all_text"> 
    <li><a href="/somewhere">Somewhere</a></li> 
    <li><a href="/somewhere-else">Over there</a></li> 
</ul> 

CSS

#all_text span { 
    text-decoration: underline; 
    background-color: yellow; 
} 

JS

$('#searchfor').keyup(function(){ 
    var $page = $('#all_text a'); 

    var searchedText = $('#searchfor').val(); 

    $page.each(function(i,a){ 
     $a = $(a); 
     $a.html($a.html().replace(/<span>/g,"").replace(/\<\/span\>/g,"")); 
     var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<span>$1</span>"); 
     $a.html(html); 
    }); 
});