Question

我想匹配带或不带逗号和空格的字符串：

<div>
"hello world"
<br>
"hello,world"
<br>
"hello world,"
<br>
",hello world"
<br>
",hello,world,"
<br>
", hello , world ,"
</div>

所以，如果我搜索“世界”的例子，我想在有或没有逗号和空格的情况下找到它并突出显示结果

 var search = "world";
 //or
 var search = "world,";
 //or
 var search = ",world";
 //or
 var search = ",world,";
 div.replace(new RegExp('(' + search + ')', 'gi'), '<span class="highlighted">$1</span>')

像这样：

<div>
    "hello <span class="highlighted">world</span>"
    <br>
    "hello<span class="highlighted">,world</span>"
    <br>
    "hello <span class="highlighted">world,</span>"
    <br>
    ",hello <span class="highlighted">world</span>"
    <br>
    ",hello<span class="highlighted">,world,</span>"
    <br>
    ", hello <span class="highlighted">, world ,</span>"

这里是我想要的一个例子： https://jsfiddle.net/nvdhqf23/5/

由于TMKelleher，我解决了这个问题 https://jsfiddle.net/nvdhqf23/6/

Answer 1

/([\s,]\s*world\s*,?)/i

[\s,]让我们有空格或逗号来确保单词之间有分隔。然后使用\s*跟随它可以在逗号/空格和单词world之间允许零到多个空格。然后我们在\s*之前使用更多,?来表示这一点，这意味着一个或没有逗号。然后我们使用不区分大小写的()正则表达式捕获i。

这应该处理替换。

<style>
.highlighted {
   background-color: rgb(100,100,255);
   color: white;
}
</style>

<div id = "0">
"hello world"
<br>
"hello,world"
<br>
"hello world,"
<br>
",hello world"
<br>
",hello,world,"
<br>
", hello , world ,"
</div>
<div id="1"></div>

<script>
var content = document.getElementById("0").innerHTML.split("<br>"),
    result  = [];
for(var i in content) {
    // First extract what we want.
    var world = /([\s,]\s*world\s*,?)/.exec(content[i])[1],
    // Split everything up to make the insertion easier.
    hello     = content[i].split(world);
    // Place the result back.
    result.push(hello.join('<span class="highlighted">'+world+'</span>'));
}
document.getElementById("1").innerHTML = result.join("<br>");
</script>

UPDATE 为了适应@jsem在评论中提出的要求，我创建了一个函数来确定正确的短语，例如“hello world”或其他许多基于搜索和标点符号的短语

function separate(search, punc) {
   if(typeof punc !== "string") punc = ",";
   var phrase = new RegExp(".*?(\\w+)\\s*(?:"+punc+"|\\s)\\s*(\\w+)\\s*(?:"+punc+")?","i").exec(search);
   if(!phrase) throw new Error("Search passed could not be parsed.");
   return {word1:phrase[1], word2:phrase[2]};
};

然后使用从中收集的信息创建一个独特的正则表达式，以获取要突出显示的信息。

function build_regex(phrase, punc) {
    if(typeof punc !== "string") punc = ",";
    return new RegExp("^.*?"+phrase.word1+"\\s*((?:"+punc+"|\\s)\\s*"+phrase.word2+"\\s*(?:"+punc+")?).*$", "i");
};

通过这两个功能，我使用与以前相同的分割和连接算法创建了一个突出显示功能。

function highlight(sentence, search, punc) {
    if(typeof punc !== "string") punc = ",";
    var highlighted = build_regex(separate(search, punc), punc).exec(sentence)[1],
        remains     = sentence.split(highlighted);
    return remains.join('<span class="highlighted">'+highlighted+'</span>');
};

例如：

highlight("This is my sentence hello, world!", "hello world");
/* Output: This is my sentence hello<span class="highlighted">, world</span>!*/
highlight("Change things up... sir.", "up sir", "\\.\\.\\.");
/* Output: Change things up<span class="highlighted">... sir</span>.*/
highlight("Give me some options? ummm...", "options! ummm", "\\?|\\!");
/* Output: Give me some options<span class="highlighted">? ummm</span>...*/

Answer 2

试试这个正则表达式：

var re = /([,|\s]+)?world([,|\s]+)?/g;

Answer 3

只需在?变量中的逗号后面添加search个可选符号：

var search = ",?world,?";

并且，如果你真的想要匹配空格（到hilight？！），只需添加\s*，这意味着从零到多个空格：

div.replace(new RegExp('(\\s*' + search + '\\s*)', 'gi'), ...

希望它有所帮助。

匹配字符串与逗号javascript

3 个答案: