JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<p id="quote">"Pizza is <span>my favorite food</span>."</p>
<div>
<p>Use string replace function to replace '<em>my favorite food</em>' with:</p>
<label><input type="radio" value="delicious" name="pizza">delicious</label>
<label><input type="radio" value="the best from New York" name="pizza">the best from New York</label>
<label><input type="radio" value="fattening" name="pizza">fattening</label>
<button>Replace!</button>
</div>
<p id="replaced"></p>

CSS

#quote, #replaced {
    font-size: 20px;
    font-style: italic;
}
span {
    text-decoration: underline;
}
label {
    display: block;
}
button, label {
    margin-top: 10px;
}
label:hover, button:hover {
    cursor: pointer;
}
div {
    border: 1px solid #c0c0c0;
    padding: 0 0 15px 15px;
}

JavaScript

$('button').click(function () {
    var string = $('#quote').text();    
    var replaceWith = $('input[name="pizza"]').filter(':checked').val();
    string = string.replace('my favorite food', replaceWith);
    $('#replaced').text(string);
});