jQuery/JavaScript插件，用于突出显示文本 [英] JQuery/JavaScript plugin for highlighting text

问题描述

我正在寻找一个用于元素中多个突出显示文本的jquery插件.我为此找到了一个非常受欢迎的插件: http://bartaz.github. com/sandbox.js/jquery.highlight.html 以及许多其他内容.

I am looking for a jquery plugin for multiple highlighted text in an element. I found a very popular plugin for exactly that: http://bartaz.github.com/sandbox.js/jquery.highlight.html along with many others.

它们可以正常工作，但是如果我要突出显示与先前突出显示的文本重叠的文本-则不起作用.

They work fine, but in case that I want to highlight text which overlaps with earlier highlighted text - it does not work.

有人知道jquery或javascript插件支持多个突出显示的文本，并且正确突出显示重叠的文本吗?

Does anyone know a jquery or javascript plugin that supports multiple highlighted texts and which correctly highlights overlapped texts?

推荐答案

您可以使用 highlighter进行所有操作插件(如果您进行了一些小调整)，就会发现它. 作为说明，我张贴了一个小提琴，以提提一个今天下午我迅速整理的工作示例: http://jsfiddle.net/4bwgA/

You can do everything with the highlighter plugin that you found if you add a couple little tweaks. As an illustration I posted to fiddle a working example that I quickly put together this afternoon: http://jsfiddle.net/4bwgA/

在这里，我将逐步介绍插件(OP所指)已经做的所有事情，最后给出重叠的突出显示区域的解决方案.

Here I will go first step by step through all the things the plugin (the OP refers to) already does and at the end give the solution to the overlapping highlighted areas.

荧光笔的作用是在要应用的单词周围放置一个标签.所以如果你有

What the highlighter does, is put a tag around the word you apply it for. So if you have

   <p>Who is the quick brown fox?</p>

并且您用突出显示了棕色"一词

and you highlighted the word "brown" with

   $("p").highlight("brown");

你得到

   <p>Who is the quick <span class="highlight">brown</span> fox?</p>

和其他命令

   $("p").highlight("brown fox");

将找不到任何东西， 导致该字符串不再包含此子字符串，因为它现在在棕色周围带有标签.

will not find anything, cause the string does not have this substring anymore, as it now has tags around brown.

因此，如果只是重叠...解决方案就很容易.该软件包提供了取消突出显示的功能，您可以在新突出显示之前应用该功能

So if it is just about the overlap ... the solution is easy. The package offers an unhighlighting function, that you can apply before the new highlighting

   $("p").unhighlight().highlight("brown fox");

并获得

   <p>Who is the quick <span class="highlight">brown fox</span>?</p>

现在，到目前为止，这并不令人兴奋.但是，如果我们先突出显示棕色"，然后再突出显示狐狸"，该怎么办.我们得到了

Now this is nothing exciting so far. But what if we have highlighted "brown" in one go and then "fox" in the next one. We get this

   <p>Who is the quick <span class="highlight">brown</span> <span class="highlight">fox</span>?</p>

然后，我们要加入相邻的突出显示区域.可以使用其他功能完成此操作，

Then we want to join the neighboring highlighted areas. This can be done with an additional function, that does something like this:

    function mergenode(node) {
        var parent1 = node.contents();
        parent1.each(function (i) {
            if (i > 0 && this.nodeType !== 1 && //if text node
                this.data.search(/^\s*$/g) === 0 && //consisting only of hyphens or blanks
                parent1[i - 1].nodeName === "SPAN" && //bordering to SPAN elements
                parent1[i + 1].nodeName === "SPAN" && 
                parent1[i - 1].className === "highlight" && //of class highlight
                parent1[i + 1].className === "highlight") {
                    selected1.push(parent1[i - 1]
                        .textContent.concat(this.data, parent1[i + 1].textContent));
            }
            else if (this.nodeType === 1 && 
                this.nodeName === "SPAN" && 
                parent1[i + 1].nodeName === "SPAN" && 
                this.className === "highlight" && 
                parent1[i + 1].className === "highlight") {
                    selected1.push(this.textContent.concat(parent1[i + 1].textContent));
            }
        });
        $(node).unhighlight().highlight(selected1);
    }

这会将所有相邻范围与类高亮合并(这是为常规荧光笔标记编写的，但是可以为nodeName和className加上两个自定义标记的附加参数轻松扩展).结果看起来像这样

This will merge all neighboring spans with class highlight (this is just written for the general highlighter tag, but could easily be extended with two extra arguments for nodeName and className, for custom tags). The result will look like this

    <p>Who is the quick <span class="highlight">brown fox</span>?</p>

到目前为止一切都很好.但是，如果我们的搜索字符串重叠怎么办? 首先...与重叠最好的做法是取消选中旧选项，然后再检查已清除的文本上是否有重叠的字符串.为此，我们需要记住先前的选择，例如可以将其保存在一个数组(我称为selected1)中，该数组在每个附加选择处都会添加一个值.

All good so far. But what if our search strings overlap?!!! First ... the best thing to do with overlaps is to deselect the old selection before checking for overlapped strings on the cleared text. For this we need to remember the previous selection, which can for example be saved in an array (I called it selected1) that gets a value added to it at each additional select.

每次运行时，最终选择(全部合并)都保存到selected1数组中，以便将来用于合并和重叠.

At every run the final selection (all merged) is saved into the selected1 array, so that it can be used for future merging and overlapping.

现在，荧光笔如何处理字符串数组?它将高亮功能按它们传递给函数的顺序应用到它们中的每一个.因此，如果两个字符串完全重叠，我们可以通过对选择字符串的数组进行排序并首先突出显示较长的字符串来解决该问题.例如

Now, how does highlighter deal with an array of strings? It applies the highlight function to each of them in the order they have been passed to the function. So, if two strings overlap completely, we can deal with that just by sorting the array of selection strings and first highlighting the longer ones. For example

    $("p").highlight(["brown fox","brown"]);

只会突出显示

    <p>Who is the quick <span class="highlight">brown fox</span>?</p>

数组可以按长度排序，类似这样

The array can be sorted by length with something like this

    words = words.sort(function (str1, str2) {
        return (str1.length < str2.length) ? 1 : 0;
    });

现在处理完全重叠和相邻的高光.现在我们必须确保得到部分重叠的字符串.在这里，我写了一个函数，比较两个字符串是否重叠...还有其他方法可以做到这一点，但是我想在这个答案中显示的大部分只是为了突出显示自己的方式而需要执行的步骤序列想要=)

The completely overlapping and neighboring highlights are now dealt with. Now we have to make sure we get the partially overlapping strings. Here I wrote a function that compares two strings for overlap ... there are other ways to do this, but what I want to show in this answer is mostly just the sequence of steps that you need to do to get the highlighting the way you want =)

此函数接收两个字符串，检查它们是否重叠，如果存在，则将它们合并，并将新的合并字符串保存到数组toselect中，最后将其附加到原始words数组中.可能会有一些无用的组合，但不会造成伤害-它们不会在最后显示.

This function takes two strings, checks if they overlap, and if so, combines them and saves the new combined string into an array, toselect, that at the end gets appended to the original words array. There might be some useless combinations, but it wont hurt - they won't show at the end.

    function overlap(a, b) {
        var l = b.length,
            m = a.length;
        for (var j = 1; j < l; j++) {
            if (a.indexOf(b.substr(l - j)) === 0) {
                toselect.push(b.concat(a.substr(j)));
            } else if (a.substr(m - j).indexOf(b.substr(0, j)) === 0) {
                toselect.push(a.concat(b.substr(j)));
            }
        }
    }

现在，我们想将此函数应用于words数组中所有可能的元素对.我们可以循环循环进行此操作，但我对此感到有些兴奋

Now we want to apply this function to all possible pairs of elements in the words array. We could iterate this with a loop, but I got a little excited and did this

    $.each(arr, function (i) {
        $.each(arr.slice(i + 1), function (i, v) {
            overlap(arr[i], v);
        });
    });

现在，我们只需要将新的toselect数组(其中所有可能重叠的字符串已连接在一起)附加到原始的words数组.

Now we just have to append the new toselect array, in which with all possible overlapping strings have been concatenated, to the original words array.

因此，现在我们有了所需的所有部件，可以将它们放在一起.每次我们要突出显示一个新的字符串或字符串数​​组时，我们都会执行以下步骤:

So now we have all the parts we need and we can put them together. Every time we want to highlight a new string or array of strings, we do the following steps:

1. 取消突出显示当前突出显示的所有内容(突出显示的所有内容均在selected1数组中).
2. 我们的新字符串或字符串数​​组进入words数组
3. 将selected1附加到words
4. 合并words中所有部分重叠的字符串对，并将新的组合字符串添加到words(使用overlap函数及其包装程序遍历整个数组-在小提琴示例中为overdiag)
5. 按字符串长度对words进行排序，因此最长的字符串将排在首位
6. 突出显示words
中的所有字符串
7. 合并所有相邻的突出显示的字符串(使用mergenode函数)
8. 最后一组突出显示的字符串保存到selected1

1. Unhighlight everything that is currently highlighted (anything that was highlighted will be in the selected1 array).
2. Our new string or array of strings goes into the words array
3. Append selected1 to words
4. Combine all partially overlapping pairs of strings in words and add the new combined strings to words (using the overlap function and its wrapper that iterates through the whole array - overdiag in the fiddle example)
5. Sort words by string length, so the longest strings will come first
6. Highlight all the strings in words
7. Merge all neighboring highlighted strings (using the mergenode function)
8. The final set of highlighted strings is saved into selected1

今天下午我很快将其组合在一起，因此它并不是一个理想的实现，但是它可以工作=)我将代码添加到了荧光笔脚本中，并将它们添加到jsfiddle上的一个简单示例中，供您使用 http://jsfiddle.net/4bwgA/.有按钮，因此您可以按所有不同的步骤，并查看它们的作用.

I put this together quickly this afternoon, so it's not a perfect implementation of the idea, but it works =) I added my code into the highlighter script and added them to a simple example on jsfiddle for you to play with http://jsfiddle.net/4bwgA/. There are buttons so you can press through all the different steps and see what they do.

这篇关于jQuery/JavaScript插件，用于突出显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！