Question

我的团队已经得出结论，为了突出我们将使用的某些文字！作为特殊符号。长话故事。

I love !!!JavaScript and jQuery!!!.

应该转变为

I love <span class='hl'>JavaScript and jQuery</span>.

不要担心边缘情况。我们正在为学龄儿童开发一个系统，他们没有复杂的文字和大量的刘海。

我该怎么做？

奖金问题：应用跨度后，我将使用jQuery higlighter插件来突出显示该代码。任何有关该方向的建议。

Answer 1

Javascript中的

replace仅替换第一次出现的字符串，因此您可以充分利用此功能并执行此操作：

var mytext = "I love !!!Javascript and jQuery!!!. Ya, !!!jQuery!!! rocks!";

while(true) {
    if (mytext.indexOf('!!!') == -1) break;
    mytext = mytext.replace('!!!', '<span class="hl">');
    mytext = mytext.replace('!!!', '</span>');
}
alert(mytext);

输出：
I love <span class="hl">Javascript and jQuery</span>. Ya, <span class="hl">jQuery</span> rocks!

Answer 2

你甚至不需要jQuery - 你可以使用javascript在字符串replace函数中构建它：

var s = 'I love !!!JavaScript and jQuery!!!. Even with multiple !!!occurrences!!!.';
var replaced = s.replace(/!!!(.+?)!!!/g, function(match, text)
    {
        return '<span class="hl">' + text + '</span>'; 
    }
);

replace函数的这种形式接受正则表达式和用于确定替换字符串的函数。函数的参数是完全匹配（例如'!!! Javascript和jQuery !!!'），然后匹配的每个部分对应于正则表达式的每个参数化组件（在这种情况下只有一个）。 / p>

NB（以防万一）：正则表达式中的?使.+匹配lazy，以便您获得此信息：

I love <span class="highlight">JavaScript and jQuery</span>. Even with multiple <span class="highlight">occurrences</span>.

而不是：

I love <span class="highlight">JavaScript and jQuery!!!. Even with multiple !!!occurrences</span>.

Answer 3

我认为对于这个问题，你需要jQuery中的contents()函数，它将选择你的选择器的所有子项，包括文本。您可以在此处阅读某人如何使用它的示例：Only select text node without DOM。

你将遇到的困难是你需要替换奇怪的!!!并且将替换为偶数！幸运的是，jQuery具有odds和evens的选择器，这些选择器也允许你这样做。

Answer 4

对于jQuery文本高亮插件，您可能需要考虑http://www.frightanic.com/2011/02/27/lenient-jquery-highlight-plugin-javascript/

jquery突出显示文本的某些部分

4 个答案: