Question

基本上，我在这里结合了2个jQuery插件：SearchHighlight和TotalStorage（将值存储到一个易于检索的cookie中）。

因此，在 Google搜索框中输入关键字后，系统会显示Google搜索结果并选择访问者点击链接。他到达页面并且用于搜索的关键字被赋予黄色背景。但是，这对我的客户来说还不够好 - 他让我这样做，以便将访问者直接带到关键字的位置。

我认为让jQuery在第一次出现关键字之前以某种方式预先添加html锚标记（name="e"）就足够了。

这里的另一个问题是：搜索短语可以（通常会）由多个单词组成。如果我选择使用第一个单词，那么在找不到该单词时该怎么办（其他单词是）？

因此，最好的方法是将字符串分解为单独的单词，测试它们是否出现在页面上，并将锚点添加到第一次出现。

我不是一个精通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', '');
});

Answer 1

这是一个应该有所帮助的基本起点。目标还不完全清楚。单词基于您的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);
}

DEMO：http://jsfiddle.net/GxvxJ/1/

在页面上的关键字出现之前插入锚链接

1 个答案: