Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta name="description" content="RegEx in jquery" />
    <!-- CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700" rel="stylesheet" type="text/css">
    <!-- Javascript -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <title>Bootstrap Template</title>
  </head>
  
  <body>
    <!-- Help Area-->
    <nav class="alert navbar-default alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <ul class="list-unstyled list-inline">
        <li><strong>Help:</strong></li>
        <li><a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a></li>
        <li><a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a></li>
      </ul>
    </nav>
    
    <div class="text">
.test { background: #00FF40; color: #FFDBAE; }
.test02 { background: #4135FF; color: #FF8ED4; border: 1px solid #4135FF;}      
    </div>
  </body>
</html>
 
body {
  font-family: titillium;  
}
.show-grid {
  background: #ccc;
  padding: 1px;
  margin: 1px;
}
.box {
  height: 100px;
  width: 100px;
}
 
$(function() {
  var regexColor                 = /#([a-fA-F0-9]){3}(([a-fA-F0-9]){3})?/gi,
      regexString                = $('.text').text(),
      regexColorArray            = regexString.match(regexColor),
      regexColorArrayNoDuplicate = $.unique(regexColorArray);
  
  // console.log(regexColorArray[2]);
  
  for(var n=0; n < regexColorArrayNoDuplicate.length; n++){
    $('body').append('<div class="box" id="' + regexColorArrayNoDuplicate[n] + '" style="background:' + regexColorArrayNoDuplicate[n] + ';">' + regexColorArrayNoDuplicate[n] + '</div>');
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
janpro
0viewers