javascript - 正则表达式匹配主题标签未包含在 html 标签中

Question

我想对以@ 或# 开头的主题标签进行正则表达式匹配，而不是包裹在html anchor 标签中。我的表情:(@|#)([a-zA-Z_]+)(?!<\/[a])不起作用，因为在文本中:

<p>@john Olor it amet, consectetuer adipiscing elit. 
Aenean commodofadgfsd 
<a class="autocompletedTag" href="#" data-id="u:2">@john_wayne</a></p>

匹配@john和 @john_wayne , 但我不想匹配 @john_wayne .

我该怎么做？

示例

在代码中:

<p>@john @kate <a>@royal_baby</a> #england <a>#russia</a></p>

我要匹配@john , @kate和 #england , 但不是 @royal_baby和 #russia .

在这段代码中:

<p>#sale #stack #hello <a>@batman</a> #avengers <a>#iron_man</a></p>

我要匹配#sale , #stack , #hello和 #avengers , 但不是 @batman和 #iron_man .

Answer 1

您可以使用以下正则表达式:

/(<a[^>]*>.*?[@#][a-zA-Z_]+.*?<\/a>)|([@#][a-zA-Z_]+)/g

想法是匹配两种情况并使用回调来过滤它们:

input = '<p>@john Olor it amet, consectetuer adipiscing elit.\
Aenean commodofadgfsd \
<a class="autocompletedTag" href="#" data-id="u:2">@john_wayne</a></p>\
<p>@john @kate <a>@royal_baby</a> #england <a>#russia</a></p>\
<p>#sale #stack #hello <a>@batman</a> #avengers <a>#iron_man</a></p>';

matches = new Array(); //empty array
input.replace(/(<a[^>]*>.*?[@#][a-zA-Z_]+.*?<\/a>)|([@#][a-zA-Z_]+)/g, function(all, a, result){
    if(result){ // If the second group exists
        matches.push(result); // then add it to matches
    }
});

document.getElementById('results').innerHTML = matches.join(); // Store results

Online jsfiddle

解释

• [@#] : 匹配@或 #一次
• [a-zA-Z_]+ : 匹配字母和下划线一次或多次
• <a : 匹配<a
• [^>]*> : 匹配除 > 以外的任何内容零次或多次匹配 >最后
• .*?[@#][a-zA-Z_]+.*? : 匹配 <a></a> 之间的内容不贪心
• <\/a> : 匹配结束标记 </a>