JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div class="smart-text">
    <p>
    </p>
</div>

<textarea id="input-text" cols="40" rows="10"></textarea>

CSS

div {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.4em;
}

JavaScript

/* Smart quotes */

$('#input-text').change(function(e) {
    $('.smart-text p').text($(this).val());
    $('.smart-text').smartify();
});

(function($) {
    $.fn.smartify = function() {

        this.each(function(i) {
            var txt = $(this).html();
            var beganDQ = false;
            var beganSQ = false;
            var beganTag = false;
            var prevChar = '';

            for (x = 0; x < txt.length; ++x) {
                if (x > 0) prevChar = txt.charAt(x - 1);

                if (txt.charAt(x) == '"') {
                    if (!beganDQ) {
                        txt = txt.replace(/"/, '&ldquo;');
                        beganDQ = true;
                    }
                    else {
                        txt = txt.replace(/"/, '&rdquo;');
                        beganDQ = false;
                    }
                }
                else if (txt.charAt(x) == "'") {
                    if (prevChar.match(/\w/)) txt = txt.replace(/'/, '&rsquo;');
                    else {
                        if (!beganSQ) {
                            txt = txt.replace(/'/, '&lsquo;');
                            beganSQ = true;
                        }
                        else {
                            txt = txt.replace(/'/, '&rsquo;');
                            beganSQ = false;
                        }
                    }
                }
            }

            $(this).html(txt);
        });
        
        return this;
    }
})(jQuery);