5

ライブ検索のハイライト機能を実装しようとしています。

私がやっていることは、ユーザーが探しているトークンを使ってajaxリクエストを送信することです。表を含むhtmlテキストを受け取ります。

したがって、単純な正規表現を使用してユーザートークンを探し、それをスパンで囲むことができると思いましたが、長い塗りつぶしの<a>タグを受け取っているので、ユーザーが何かを入力し、内部の何かを置き換えることでHTMLを壊す可能性がありますタグ。

では、検索でhtmlタグを除外するにはどうすればよいですか？

ああ、私はjavascriptregexpを使用しています。

4

3 に答える 3

5

jQuery ハイライトプラグインをロードする必要があり、次のようなことができます。

var words = "keyword1,keyword2,keyword3";
var keywords = words.split(',');
for(var i = 0; i < keywords.length; i++) {
    $(selector).highlight($.trim(keywords[i]));
}

ページ全体で強調表示したい場合は、 に置き換えます。それ以外の場合は、目的の要素にセレクターを使用しますselector。'body'

于 2012-04-20T23:20:43.573 に答える
0

jQueryプラグインがどれだけうまく機能するかはわかりません。これが私が思いついたスクリプトですが、複数のタグのテキストを強調表示していません。「myscript」を強調表示したいのに、htmlが「myscript」のように見える場合、強調表示されません。まだその部分に取り組んでいます。

これまでのスクリプトは次のとおりです。

str='<img src="brown fox.jpg" title="The brown fox" />'
    +'<p>some text containing fox. And onother fox.</p>'
var word="fox";
word="(\\b"+ 
    word.replace(/([{}()[\]\\.?*+^$|=!:~-])/g, "\\$1")
        + "\\b)";
var r = new RegExp(word,"igm")
str.replace(/(>[^<]+)/igm,function(a){
    return a.replace(r,"<span class='hl'>$1</span>");
})
于 2012-10-19T08:19:59.887 に答える
0 
//These results to be highlighted
var results = [];
results[0] = 'jquery';
results[1] = 'json';
results[2] = 'Java Script';
results[3] = 'java';
results[4] = 'java Update';
results[5] = 'javelin';
results[6] = 'James';
results[7] = 'jacob';
results[8] = 'Jail';
results[9] = 'Jailor';

jQuery(document).ready(function(){
    //Search the results
    jQuery('#search').live('keyup', function(event){
        var term = jQuery(this).val();//keyword to be matched
        var htm = '';

        //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace.
        if(event.keyCode > 40 || event.keyCode <91  || event.keyCode == 8 ||
          event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 ||
          event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 ||
          event.keyCode == 40) {
            for(x in results){
                var match = results[x];
                if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){
                    var o = '<b><u>'+term+'</u></b>';
                    var a = match.replace(term, o);
                    htm += '<li>'+a+'</li>';
                }
            }
            //create a orderd list for the matched results
            var output = '<ol>' + htm + '</ol>';
            if (htm.length > 0) {
                jQuery('#result').show().append(output);
            }
        }
    });
});

完全なチュートリアルはここにあります: http://www.webspeaks.in/2012/09/live-text-search-highlight-using.html

于 2012-09-14T04:49:12.323 に答える