Online Text to url Generator

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="col-md-6">


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Any ordinary string</label>  
  <div class="col-md-4">
  <input class="title-top" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Human-readable url slug</label>  
  <div class="col-md-4">
  <div id="didedit"></div>
  </div>
</div>
<!-- Button (Double) -->
<div class="form-group">
  <div class="col-md-8">
    <button id="doedit" name="button1id" class="btn btn-success hitam">Go »</button>
    <button id="button2id" name="button2id" class="btn btn-danger">Reset »</button>
  </div>
</div>
</div>

JavaScript

function slug(str) {
    var $slug = '';
    var trimmed = $.trim(str);
    $slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
    replace(/-+/g, '-').
    replace(/^-|-$/g, '');
    return $slug.toLowerCase();
    
}

        $("#doedit").click(function() {
            $('#didedit').text(slug($('#title-top').val()));
            
       });