JSFiddle - React, Tailwind, and code Playground

by I Sang Hyeon

HTML

<div>
    <P>NUMBER: <span id="spanNumber">0123456789</span></P>
    <P>T e x t ....: <span id="spanText"></span></P>
</div>
<div>
    <input type="text" id="txtSubString1"/>[이상]
    <button id="cmdSubString1">subString1</button>
</div>
<div>
    <input type="text" id="txtIndexOf"/>
    <button id="cmdIndexOf">indexOf</button>
</div>
<div>
    <input type="text" id="txtSubString2a"/>[이상]
    <input type="text" id="txtSubString2b"/>[미만]
    <button id="cmdSubString2">subString2</button>
</div>
<div>
    <h1>Results</h1>
    <p>SubString1 : <span id="spanSubString1"></span></p>
    <p>indexOf    : <span id="spanIndexOf"></span></p>
    <p>SubString2 : <span id="spanSubString2"></span></p>
</div>

JavaScript

$(document).ready(function(){
    var text = "ABC@DEFGHIJ";
    var a,b = 0;
    var result = "";
    
    
    
    $('#spanText').text(text);
    
    $('#cmdSubString1').click(function(){
        a = $('#txtSubString1').val();
        result = text.substring(a);
        
        $('#spanSubString1').text(result);
    });
    
    $('#cmdIndexOf').click(function(){
        a = $('#txtIndexOf').val();
        
        result = text.indexOf(a);
        
        $('#spanIndexOf').text(result);
    });
    
    $('#cmdSubString2').click(function(){
        a = $('#txtSubString2a').val();
        b = $('#txtSubString2b').val();
        
        result = text.substring(a,b);
        
        $('#spanSubString2').text(result);
    });
});