Question

我目前正在使用正则表达式为每条推文中的用户名着色。

$('.tweet span').each(function() {
    $(this).html($(this).text().replace(/@[a-z0-1A-Z]+/g, '<span class="blue">$&</span>'));
});

我如何将这个正则表达式扩展为颜色标签？

Answer 1

试试这个：

＆＃13;

$('.tweet span').each(function() {
     $(this).html($(this).text().replace(/(@|#)\w+/g, '<span class="blue">$&</span>'));
   });

＆＃13;

.blue {
  color: blue;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tweet">
  <span>
    Kanye, Kim and Katy at @givenchy. That's only the beginning of #PFW's star-studded FROWs: http://yhoo.it/182wjqd  
    </span>
</div>

＆＃13;

Answer 2

我建议如下：

// because we're updating the html, we *use* the html() method,
// which automatically supplies the html as a string to the
// anonymous function (the 'h' below):
$('.tweet span').html(function(i, h) {
  // a slightly more simple (or concise) regular expression,
  // to match either a '@' or a '#' followed by a string
  // of alphanumerics or underscore:
  var reg = /(@|#)\w+/g;
  // returning the original HTML after the replacement,
  // passing the matched string ('match') to the anonymous
  // function:
  return h.replace(reg, function(match) {
    // identifying whether the match is a hash or @user
    // by the first character of the match:
    switch (match.charAt(0)) {
      case '#':
        // if it's a hash, we return the match wrapped in
        // a span with the class of 'hash':
        return '<span class="hash">' + match + '</span>';
        break;
      case '@':
        // otherwise, if it's an @username, we return the
        // match wrapped in a span of class="user":
        return '<span class="user">' + match + '</span>';
        break;
      // if neither of those matches, we simply return the
      // unwrapped match:
      default:
        return match;
        break;
    };
  });
});

$('.tweet span').html(function(i, h) {
  var reg = /(@|#)\w+/g;
  return h.replace(reg, function(match) {
    switch (match.charAt(0)) {
      case '#':
        return '<span class="hash">' + match + '</span>';
        break;
      case '@':
        return '<span class="user">' + match + '</span>';
        break;
      default:
        return match;
        break;
    };
  });
});

.hash {
  color: blue;
}
.user {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="tweet"><span>An implausible #tweet, for the benefit of @benjamin</span>
  </li>
</ul>

修改了上述内容，因为它对我来说有点难看：

$('.tweet span').html(function(i, h) {
  var reg = /(@|#)\w+/g,
      // creating an object to associate class-names with
      // the relevant symbol:
      classes = {
        '#' : 'hash',
        '@' : 'user'
      },
      // for use later (in the replace):
      hashOrUser;
  return h.replace(reg, function(match) {
    // we should only get strings that return true here
    // (RegExp.prototype.test() returns a Boolean; true if
    // the supplied string matches the regex; false if not)
    // but I *try* to anticipate potential failure:
    hashOrUser = /^[@#]/.test(match);

    // if we have a true (and we should), then we return the
    // concatenated string of html and the found-match,
    // the relevant class ('user' or 'hash') is supplied by the
    // classes object (defined above); otherwise, if hashOrUser is false
    // we return the matched string:
    return hashOrUser ? '<span class="' + classes[match.charAt(0)] + '">' + match + '</span>' : match
  });
});

$('.tweet span').html(function(i, h) {
  var reg = /(@|#)\w+/g,
      classes = {
        '#' : 'hash',
        '@' : 'user'
      },
      hashOrUser;
  return h.replace(reg, function(match) {
    hashOrUser = /^[@#]/.test(match);
    return hashOrUser ? '<span class="' + classes[match.charAt(0)] + '">' + match + '</span>' : match
  });
});

.hash {
  color: blue;
}
.user {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="tweet"><span>An implausible #tweet, for the benefit of @benjamin and others #stackoverflow #futurebenefits, by @davidrhysthomas</span>
  </li>
</ul>

参考文献：

JavaScript的：
jQuery的：
- html()。

如何使用正则表达式为字符串中的用户名和主题标签着色

2 个答案: