突出显示从头开始匹配的文本

Question

我必须突出显示文字。我写了一些小代码，甚至突出显示不是以给定值开头的文本。那么是否有任何RegExp用于我的查询目的。我试过了new RegExp('(^| )' + val, 'gi')，但它正在移除文字。这是fiddle

var text= 'lu'
$('ul li').each(function(){
 var reg = new RegExp('(' + text + ')', 'gi')
txt = $(this).text();      
txt = txt.replace(reg, "<span class='highlight'>" + '$1' + "</span>");              
$(this).html(txt);                                 
})

.highlight{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li>blue diamond</li>
    <li>blue diamond lue gold</li>
    <li>lue diamond lue gold</li>
    <li>lue diamond lue</li>    
</ul>

Answer 1

您要找的是\b字边界特殊字符。将您的正则表达式更改为此，它将执行您想要的操作：

var reg = new RegExp('\\b(' + text + ')', 'gi')

Answer 2

您应该使用单词边界来避免匹配部分单词：

var reg = new RegExp('(\\b' + text + '\\b)', 'gi');

Updated JSFiddle

Answer 3

如果您想突出以lu开头的单词，那么您可以使用此正则表达式：

var text= '(?:^|\\s)lu\\w*'

<强> Working demo

var text= '(?:^|\\s)lu\\w*'
$('ul li').each(function(){
 var reg = new RegExp('(' + text + ')', 'gi')
txt = $(this).text();      
txt = txt.replace(reg, "<span class='highlight'>" + '$1' + "</span>");              
$(this).html(txt);                                 
})

.highlight{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li>blue diamond</li>
    <li>blue diamond lue gold</li>
    <li>lue diamond lue gold</li>
    <li>lue diamond lue</li>    
</ul>

Answer 4

也可以捕获前面的空格并引用替换部分中捕获空格字符的组。

var reg = new RegExp('(^| )(' + text + ')', 'gim')
txt = txt.replace(reg, "$1" + "<span class='highlight'>" + '$2' + "</span>");

示例：

＆＃13;

＆＃13;

var text= 'lu'
$('ul li').each(function(){
 var reg = new RegExp('(^| )(' + text + ')', 'gim')
txt = $(this).text();      
txt = txt.replace(reg, "$1" + "<span class='highlight'>" + '$2' + "</span>");              
$(this).html(txt);                                 
})

＆＃13;

.highlight{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li>blue diamond</li>
    <li>blue diamond lue gold</li>
    <li>lue diamond lue gold</li>
    <li>lue diamond lue</li>    
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 5

我明白了，你想要一个RegEx，那就是开头的所有内容。

匹配＆＃34; est＆＃34;：

Test会匹配

est不会匹配，因为它在一开始就是正确的。

如果我理解正确，那么以下行应该有所帮助：

var reg = new RegExp('^([^'+text+'](' + text + '))', 'gi');

如果我不理解，请发表评论并留在这里。也许有一天，有人发现回到这里，这可能是他/她正在寻找的解决方案。

小提琴（棍棒）：http://jsfiddle.net/1uyg9wqm/38/