jQuery addClass example

Change class name on click in jQuery

by AndrewKang

HTML

<script src="https://cdn.jsdelivr.net/gh/Andrew-Kang-G/url-knife@master/dist/url-knife.bundle.js"></script>
<h3>
Get & decompose URLs in text
</h3>
<div style="margin-bottom:3%;">
<a href="https://github.com/Andrew-Kang-G/parse-urls" target="_blank">
https://github.com/Andrew-Kang-G/url-knife
</a>
</div>


<h5>
  The sample below is set to 'noProtocolJsn' : {
  'ip_v4' : true,
  'ip_v6' : true,
  'localhost' : true,
  'intranet' : false
  }, but the default is all 'false'.</h5>
<!-- 1. TextArea -->
<h5>(In case of "noProtocolJsn['intranet']=true", some false positives can be caused)</h5>

<div class="container">
  <div class="backdrop">
    <div class="highlights"></div>
  </div>
  <textarea>test</textarea>
</div>
<div>
  <button>
    Extract
  </button>
</div>



<pre id="logger" class="web_console"></pre>

CSS

/* 1. TextArea*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  margin: 30px;
  background-color: #f0f0f0;
}

.container,
.backdrop,
textarea {
  width: 460px;
  height: 180px;
}

.highlights,
textarea {
  padding: 10px;
  font: 20px/28px 'Open Sans', sans-serif;
  letter-spacing: 1px;
}

.container {
  display: block;
  margin: 0 auto;
  transform: translateZ(0);
  -webkit-text-size-adjust: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid #685972;
  background-color: #fff;
  overflow: auto;
  pointer-events: none;
  transition: transform 1s;
}

.highlights {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
}

textarea {
  display: block;
  position: absolute;
  z-index: 2;
  margin: 0;
  border: 2px solid #74637f;
  border-radius: 0;
  color: #444;
  background-color: transparent;
  overflow: auto;
  resize: none;
  transition: transform 1s;
}

.highlighted1 {
  border-radius: 3px;
  color: transparent;
  background-color: #b1d5e5;
}

button {
  display: block;
  width: 300px;
  margin: 30px auto 0;
  padding: 10px;
  border: none;
  border-radius: 6px;
  color: #fff;
  background-color: #74637f;
  font: 18px 'Opens Sans', sans-serif;
  letter-spacing: 1px;
  appearance: none;
  cursor: pointer;
}

.perspective .backdrop {
  transform: perspective(1500px) translateX(-125px) rotateY(45deg) scale(.9);
}

.perspective textarea {
  transform: perspective(1500px) translateX(155px) rotateY(45deg) scale(1.1);
}

textarea:focus,
button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #c6aada;
}

/* 2. ContentEditable  */
.highlighted2 {
  background-color: yellow;
}

div.editable {
  border: 1px solid black;
  height: 200px;
}

strong {
  font-weight: bold;
}

JavaScript

// 1. TextArea - All tags are just string
var textStr = 'If you visit 192.179.3.5?abc=2  \n' +
  ' http://[::1]:8000에서 ftp://[::1]]] fakeshouldnotbedetected.urld?abc=fake "ssh ://www.example.com/wpstyle/?p=364" is ok \n' +
  'HTTP://foo.com/blah_blah_(wikipedia) https://www.google.com/maps/place/USA/@36.2218457,... tnae1ver.com:8000on the internet  Asterisk\n ' +
  'the packed1book.net. s5houl７十七日dbedetected.jp?japan=go&html=<span>가나다@pacbook.net</span>; abc.com/ad/fg/?kk=5 [email protected]' +
  'https://www.example.com/foo/?bar=baz&inga=42&quux\n' +
  'Have you visited http://goasidaio.ac.kr?abd=5안녕하세요?5...,.&kkk=5rk.,, ' +
  'http://✪df.ws/123\n' +
  'http://142.42.1.1:8080/\n' +
  'https://foo_bar.example.com에서 만나요. \n' +
  'http://foo.bar/?q=Test%20URL-encoded%20stuff \n' +
  'http://-.~_!$&\'()*+,;=:%40:80%2f::::::@example.com ' +
  'Have <b>you</b> visited goasidaio.ac.kr?abd=5hell0?5...&kkk=5rk... ';



$('button').click(function() {

  $('#logger').html(JSON.stringify(Pattern.TextArea.extractAllUrls($('textarea').val(), {
    'ip_v4': true,
    'ip_v6': true,
    'localhost': true,
    'intranet': false
  }), null, 2));

});


$(function() {

  // 1. TextArea
  //bindEvents();
  // handleInput();

  $('textarea').val(textStr);
  //handleInput();
  $('#logger').html(JSON.stringify(Pattern.TextArea.extractAllUrls(textStr, {
    'ip_v4': true,
    'ip_v6': true,
    'localhost': true,
    'intranet': false
  }), null, 2));

})