JSFiddle - React, Tailwind, and code Playground

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 fuzzy 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>


<div class="container">
    <div class="backdrop">
        <div class="highlights"></div>
    </div>
    <textarea>test</textarea>
</div>
<div>
 <button>
   Extract & Normalize
 </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,...

JavaScript

m
    // 1. TextArea - All tags are just string
        var textStr = '142 .42.1.1,:,,8080 123.45xtp://--[::1]:8000에서 httt //-www.ex ample;comm                      /wpstyle/??p=3?6/4&x=5/3 in the ssh h::/;/ww.example.com/wpstyle/?p=364 is ok ' +
    'h ttp:/://132 .42.,1.1 HT TP:// foo, co,.kr/blah_blah_(wikipedia) localhost   :80 https://www.google .org :8005/maps/place/USA/@36.2218457,... tnae1ver.co. jp;8000on the internet  Asterisk\n ' +
    'the packed1book,ac,.kr,.net. 가나다@apacbook.ac.kr fakeshouldnotbedetected.url?abc=fake s5houl７十七日dbedetected.jp?japan=go&html=<span>가나다@pacbook.travelersinsurance</span>;' +
    ' abc,co.krr//ad/fg/?kk=5 [email protected] Have you visited http://agoasidaio.ac.kr ?abd=55...,.&kkk=5rk.,, ' +
    'Have <b>you</b> visited goasidaio.ac.kr?abd=5hell0?5...&kkk=5rk.,. ';
        



	$('button').click(function(){
	
       $('#logger').html(JSON.stringify(Pattern.TextArea.extractAllFuzzyUrls( $('textarea').val()), null, 2));
	
	});


    $(function () {

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

       $('textarea').val(textStr);
        //handleInput();
 $('#logger').html(JSON.stringify(Pattern.TextArea.extractAllFuzzyUrls(textStr), null, 2));

    })