0

基本的に、ここでは 2 つの jQuery プラグインを組み合わせています: SearchHighlight と TotalStorage (値を簡単に取得できる Cookie に格納します)。

そのため、キーワードがGoogle 検索ボックスに入力されると、Google の結果が表示され、訪問者が選択したリンクをクリックします。彼がページにアクセスすると、検索に使用したキーワードの背景が黄色になります。しかし、これは私のクライアントにとっては十分ではありません。訪問者がキーワードの場所に直接移動できるようにするよう依頼されました。

name="e"キーワードが最初に出現する直前に、何らかの形で html アンカー タグ () を先頭に追加する jQuery があれば十分だと思います。

ここでのもう 1 つの問題は、検索フレーズが複数の単語で構成されている可能性がある (そして多くの場合そうなる) ことです。最初の単語を使用することを選択した場合、その特定の単語が見つからない場合 (他の単語は見つかった場合) はどうすればよいですか?

したがって、最善の方法は、文字列を別々の単語に分割し、それらがページに出現するかどうかをテストし、最初に出現した単語の先頭にアンカーを追加することです。

私は本当に JavaScript/jQuery に精通した人ではないので、助けていただければ幸いです。

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

// when the form is submitted, search phrase is written to a "kw" cookie
$(document).ready(function() {

    $("#submit").click(function() {
        var keywords = $("input[name=query]").val();
        $.totalStorage('kw', keywords);
    });
});​

フッターで:

jQuery(function() {
    var options = {
        exact: "whole",
        style_name_suffix: false,
        keys: $.totalStorage('kw') // keys determine what strings are to be highlighted
    }

    jQuery(document).SearchHighlight(options);


    // I suppose here the value of KW cookie could be broken into words
    // and searching for occurrences could be put
    // along with the code for prepending occurrences with an anchor tag

    // reset KW cookie to empty value
    $.totalStorage('kw', '');
});​
4

1 に答える 1

0

これが役立つはずの基本的な出発点です。完全な目的が何であるかはまだ完全には明らかではありません。単語は Lorum Ipsum のデモに基づいています。html 出力構造も変更する必要があります。効果が視覚的にわかるように、タグで単語を折り返すようにしました。

また、単語が html タグのいずれかの部分に一致する場合、このコードは html を台無しにすることに注意してください。正規表現は、htis を考慮して調整する必要があります

/* would take this array from your storage plugin*/
var keywords = ['content', 'phrase', 'affordable','another'];
keywords.sort();
var words=[];
/* make new array that includes first letter caps for begiining sentences*/
for ( i=0;i<keywords.length;i++){
    words.push( keywords[i], upperCaseKeyword(keywords[i]));
}
/* get html from content element and store in variable*/
var html = $('.wrapper').html();

for (i = 0; i < words.length; i++) {
    var word=words[i];    
    var reg = new RegExp(words[i], 'g');
    html = html.replace(reg, '<a name="'+word+'" class="tag">' + word + '</a>');   

}

/* replace old html with modified*/

$('.wrapper').html(html);

/* helper function*/
function upperCaseKeyword(word) {
    var firstLetter = word.substr(0, 1).toUpperCase();
    return firstLetter + word.slice(1);
}

デモ: http://jsfiddle.net/GxvxJ/1/

于 2012-10-14T17:02:16.753 に答える