JSFiddle - React, Tailwind, and code Playground

by Radonirina Maminiaina

HTML

<p>Tap text with # or @</p>
<div class="hashTag">
            <div class="text-area-wrapper">
                <textarea name="dataSend" id="" cols="30" rows="10" id="twit"></textarea>
            </div>
            <div id="result">
            </div>
            <button type="submit" class="submit">Envoyer</button>
        <div id="resultAjax"></div>
    </div>

CSS

.hashTag {
            margin-top: 30px;
            position: relative;
            width: 233px;
            height: 350px;
        }
        .hashTag textarea {
            background: transparent;
            z-index: 1;
            font: normal 14px Arial;
            position: absolute;
            top: 5px;
            left: 5px;
        }
        #result {
            position: absolute;
            top: 8px;
            left: 8px;
            background: transparent;
            color: transparent;
            font: normal 14px Arial;
        }
        #result a {
            display: inline-block;
            color: #000;
            text-decoration: none;
            font: normal 14px Arial;
            background: #d8dfea;
            background: -webkit-gradient(linear, center top, center bottom, from(#dce6f8), to(#bdcff1));
            background: -webkit-linear-gradient(#dce6f8, #bdcff1);
            -webkit-border-radius: 2px;
            -webkit-box-shadow: 0 0 0 1px #a3bcea;
            font-weight: normal;
            color: transparent;
        }
        .text-area-wrapper {
            height: 185px;
        }

JavaScript

$('.hashTag textarea').on('keyup',
            function() {
                var regExpForUserGroup = /(^|\s)(@|#)(\w+)/g;
                var valueOfTextarea = $(this).val();
                var matched = valueOfTextarea.match(regExpForUserGroup);
                var valueOfQuery;
                var replaced;
                // from http://stackoverflow.com/questions/28298748/how-to-strip-specific-tag-into-div-in-javascript/28300163?noredirect=1#comment44952991_28300163
                var temp = valueOfTextarea.replace(/[\<]/g, "&lt;");
                var result = temp.replace(/[\>]/g, "&gt;");
                
                if ( regExpForUserGroup.test(valueOfTextarea) ) {
                    valueOfQuery = result.replace(regExpForUserGroup, "$1<a href=\"http://www.twitter.com/$3\">$2$3</a>");
                }
                // remove the link into the div
                if( typeof valueOfQuery === "undefined") {
                    $('#result').find('a').remove();
                }
                // Set the new content of div#result
                $('#result').html(
                    valueOfQuery
                );

                // Loop over the link element
                // and add @ before the link or #.
                $('#result a').each(
                    function() {
                        var linkText = $(this).text();

                        if ( /@/g.test(linkText) ) {
                            $(this)[0].href = "http://www.twitter.com/" + linkText.split('@')[1];
                        }

                        if ( /#/g.test(linkText) ) {
                            $(this)[0].href = "http://www.twitter.com/hashtag?q=" + linkText.split('#')[1];
                        }
                        $(this).mousedown(
                            function() {
                                //console.log('yeah')
                                // TODO: autocomplete
                            }
                        );
            ...