Question

我有一个包含产品和说明的网站。产品也可以有标签和标签基本上只是单词（[a-zA-Z] +），可以是这些描述的一部分。我想要做的是允许用户点击描述中也是标签的任何单词，这样他就可以看到所有带有此标签的产品。听起来很简单，对吧？挑战在于描述只是没有标记的纯文本。我可以让服务器为描述中的所有标签添加额外的标记，但这会减慢太多的速度。此外，如果我这样做，它会降低网站的吸引力。添加这些标签的超链接。所以我的团队中有人建议保持简单，只在需要时添加标记想法是用户可以将鼠标移动到单词上方。如果它恰好是一个标签，只要鼠标在它上面就会突出显示。当用户点击它时，它将打开标签选择页面并显示相关产品。由于简单的正则表达式可以为我提供不同的单词列表，然后将其与数据库中的标签列表进行比较，因此在描述中知道哪些单词是标签也不是很困难。没问题。
但我的问题是JQuery可以检测描述中的单个单词并突出显示它们！正如我所说，我不想在描述中添加额外的标记，甚至不是客户端。所以我的JQuery需要在飞行中做到这一点＆＃39;。有关此单词检测功能的任何建议吗？

（如果它也适用于描述之外的单词，则没有问题，但如果它仅适用于描述中的单词则更好。）

Answer 1

您可以执行以下操作：

$(".word_split").lettering('words');   
linkableTags = ['Lorem','fermentum','Nullam','volutpat']
$("span[class^='word']").click(function () {
    var selectedText = $(this).text();
    if ( $.inArray( selectedText , linkableTags ) != -1 ){
        $(this).html('<a href="#"><u>'+$(this).text()+'</u></a>');
    }
});

关于内容

<p class="word_split">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit interdum fermentum. Aenean fermentum imperdiet augue, et venenatis lectus semper vel. Phasellus faucibus nulla in quam egestas eleifend. Cras tristique augue eget libero tristique condimentum. Mauris eget diam eget risus feugiat rutrum. Duis placerat lorem quis augue semper porttitor. Nullam iaculis dui feugiat erat condimentum rutrum. Sed at accumsan diam. Maecenas ut urna id velit posuere auctor in vel dui. Aenean consectetur dui in leo faucibus sed feugiat dui blandit. In accumsan diam vitae erat volutpat volutpat aliquam nunc euismod. Vivamus viverra lorem nulla. Quisque justo quam, adipiscing sit amet auctor non, laoreet sit amet nisl. Donec euismod lorem ac mi dictum volutpat. Donec ligula mi, varius ac auctor at, sollicitudin id elit. In auctor sodales ipsum nec consectetur. Sed lacinia varius nibh vitae vulputate.<p>

应用了css：

.word_split span:hover {
    font-weight:bold;
}

Answer 2

我觉得你的用例有点疯狂，但这可以用jquery highlight plugin来完成。使用此插件，您只需调用以下jquery命令在页面正文中的任何位置突出显示单词

$("body").highlight("word");

请注意，这将突出显示该单词的所有示例，而不仅仅是鼠标当前所在的位置。

Answer 3

我也会像@roryok建议的那样去寻找突出显示的插件。我有一些示例代码：）

链接： http://jsfiddle.net/nc20a48e/

<script>
$("body #tags a").click(function(){
    $("body #bodyText").unhighlight();
    $("body #bodyText").highlight($(this).text());
    return false;
});     
</script>

选择一个单词并单击它

3 个答案: