JSFiddle - React, Tailwind, and code Playground

by nogoodatcoding

HTML

<a href="http://stackoverflow.com/questions/5304762/ios-bubble-text/">fiddle for http://stackoverflow.com/questions/5304762/ios-bubble-text/</a><br />

<input type="text" id="ascii" /> <button id="convert">Convert</button>
<h2>Output</h2>
<div>
    <span id="out"></span>
</div>

CSS

div {
    border: 1px solid #666;
}

JavaScript

$('#convert').click(function(){
    var str = $('#ascii').val();
    var s = '';
    console.log(str);
    
    for(var i=0; i < str.length; i++){
        console.log("Working with", str.charAt(i));
        s += getEnclosedAlphanumeric(str.charAt(i));
        $('#out').html(s);
    }
});


function getEnclosedAlphanumeric(c){
    if(c >= 'A' && c<='Z'){
        return '&#' + (c.charCodeAt() - 'A'.charCodeAt() + 9398) + ';';
    }
    else if(c >= 'a' && c<='z'){
        console.log("Small");
        return '&#' + (c.charCodeAt() - 'a'.charCodeAt() + 9424) + ';';        
    }
    else if(c >= '0' && c<='9'){
        console.log("Digit");
        return '&#' + (c.charCodeAt() - '1'.charCodeAt() + 9312) + ';';        
    }
    else {
        return c;
    }
}