jquery突出显示某段文字

问题描述：

我的团队已经得出结论，为了突出显示某些文本，我们将使用!!!作为特殊符号。很长的故事。jquery突出显示某段文字

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

应该得到转化为

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

不要担心边界情况。我们正在为学童开发一个系统，他们没有复杂的文本，有很多刘海。

我该怎么做？

奖金的问题：跨度应用后，我打算使用jQuery高亮插件来突出显示该代码。任何有关这方面的建议。

为什么试图在jQuery来改变呢？这似乎是一些东西，你会得到处理服务器端 – GSto 2010-08-18 21:15:08

你是对的。但是，如果我们可以在客户端实现这些限制，那么这会为我们节省大量时间。 – 2010-08-18 21:19:31

请提供更多的上下文。这是一个网页表单吗？您可能需要使用正则表达式来定位三重括号内的短语并将其替换。另外，不是命名你的css类h1，而是将它称为“hilite”，然后你可以将任何CSS规则与你想要的关联起来。 – funkymushroom 2010-08-18 21:28:28

答

replace：

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

，而不是这个仅替换首次出现的字符串，因此您可以很好地使用此功能并执行此操作：

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!

答

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

你将遇到的困难是你需要用奇怪的!!!替代，甚至可以用!!!代替。幸运的是，jQuery具有odds和evens的选择器，这应该允许你这样做。

答

你甚至不需要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 !!!'），然后每个匹配的部分对应于正则表达式的每个参数化组件（在这种情况下只有一个）。

NB（以防万一）：在正则表达式的?使得.+比赛lazy，让你得到这样的：在Javascript

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

或's.replace（/ !!!（。+？）!!!/ g，' $ 1'）' – matyr 2010-08-19 07:15:18

答

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

jquery突出显示某段文字

相关推荐