JSFiddle - React, Tailwind, and code Playground

by Howl Wong

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<div class="ui warning message">
    <ul id='errors' class="list"><li>Loading...</li></ul>
</div>
<div class="ui form">
    <textarea id="logs">
        091 ActionController::RoutingError (No route matches [GET] "/plugins/servlet/streams"):
        091 ActionController::Routing (No route matches [GET] "/plugins/servlet/streams"):
        091 ActionController::RoutingError (No route matches [GET] "/plugins/servlet/streams"):
        091 ActionController::RoutingError (No route matches [GET] "/servlet/streams"):
        091 ActionController::RoutingError (No route matches [GET] "/plugins/servlet/streams"):
        091 ActionController::RoutingError (No route matches [GET] "/servlet/streams"):
        091 ActionController::Routing (No route matches [GET] "/servlet/streams"):
    </textarea>
</div>
<script type="text/x-handlebars-template" id="template">
  {{#.}}
    <li>{{.}}</li>
  {{/.}}
</script>

CSS

html{
    padding: 30px;
}

JavaScript

var logs = $('#logs').val().match(/[^\s](?=.*?(Error))(?!.*?(\/plugins)).*/gm);
var source   = $("#template").html();
var template = Handlebars.compile(source);

var rendered = template(logs);
$('#errors').html(rendered);