主题标签和颜色的正则表达式答案

【问题标题】：Regular expression for hashtags and colors主题标签和颜色的正则表达式
【发布时间】：2015-01-04 15:15:35
【问题描述】：

我正在使用此代码在我的文本中查找主题标签并用链接替换它们。但是，我的文本段落也包含十六进制颜色。因此，每当我解析代码时，我的颜色范围都会被链接替换。有没有办法防止这种情况。

hashtag_regexp = /#([a-zA-Z0-9]+)/g;

function linkHashtags(text) {
 return text.replace(
    hashtag_regexp,
    '<a  href="'+base_url+'home/getTagArticles/$1">#$1</a>'
 );
}

$(document).ready(function(){
 $('.article-text').each(function() {
    $(this).html(linkHashtags($(this).html()));
  });
});

【问题讨论】：

你能提供一个十六进制颜色的例子吗？这应该显示你需要匹配什么以避免击中它们。
#$1 预计会返回什么？

标签： jquery regex hex hashtag

【解决方案1】：

/((?!(#[a-fA-F0-9]{3})(\W|$)|(#[a-fA-F0-9]{6})(\W|$))#[a-zA-Z0-9]*)/g

这将查找所有字母数字主题标签，并忽略任何 3 或 6 个基于十六进制字符的主题标签，当它们后跟非字母数字字符或行尾时。这不是最流畅的，但我测试了它，它似乎可以工作。

#aaa  //no match
#ffffff  //no match
#ffffff.  //no match
#rat  //match
#HashtagHere  //match

编辑：我编辑了正则表达式以将行尾也视为颜色的结尾。

【讨论】：

【解决方案2】：

您需要做的是确定一些关于十六进制颜色上下文的不同内容，然后将其作为negative-lookahead 添加到正则表达式中。

假设它们用于内联 CSS 中的背景颜色，如下所示：

background-color: #a4d6FF

您的正则表达式可以修改如下：

hashtag_regexp = /(?!background-color: *)#([a-zA-Z0-9]+)/g;

（未测试；如果有效，请告诉我）

【讨论】：

【解决方案3】：

试试

    var hashtag_regexp = /(#(?!\d+|\w+))/;
    var base_url = "/abc123/";

    function linkHashtags(_, text) {
     // note `$1` will return `#` as the remembered matched substring
     return text.replace(
        hashtag_regexp,
        '<a  href="'+base_url+'home/getTagArticles/$1">$1</a>'
     );
    }

    $(document).ready(function() {
     $('.article-text').each(function() {
        $(this).html(linkHashtags);
      });
    });

var hashtag_regexp = /(#(?!\d+|\w+))/;
var base_url = "/abc123/";

function linkHashtags(_, text) {
 return text.replace(
    hashtag_regexp,
    '<a  href="'+base_url+'home/getTagArticles/$1">$1</a>'
 );
}

$(document).ready(function(){
 $('.article-text').each(function() {
    $(this).html(linkHashtags);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="article-text">
# #000000
</span>
<span class="article-text">
# #000033
</span>
<span class="article-text">
# #0000aa
</span>
<span class="article-text">
# #0000a3
</span>

【讨论】：