JSFiddle - React, Tailwind, and code Playground

by scaillerie

HTML

<div id="demo">
    <span>Some text</span>
    <span>Here</span>
    <span>Hello world</span>
    <span>Some text</span>
</div>

<input type="button" value="Init" id="init" />
<input type="button" value="Translate - 1" id="btnTr1" />
<input type="button" value="Translate - 2" id="btnTr2" />

CSS

span {
    display: block;
    margin: 5px;
}

.translated {
    color : red;
    font-weight: bold;
}

JavaScript

var phrase = "some text",
    translation = "Here";

$("#btnTr1").on("click", function () {
    $('span').filter(function () {
        return $(this).text().toLowerCase() == phrase;
    }).text(translation);

    $('span').filter(function () {
        return $(this).text().toLowerCase() == phrase;
    }).addClass("translated");
});


$("#btnTr2").on("click", function () {
    $('span').filter(function () {
        return $(this).text().toLowerCase() == phrase;
    }).text(translation).addClass("translated");
});


$("#init").on("click", function() {
    $("#demo").html("<span>Some text</span><span>Here</span><span>Hello world</span><span>Some text</span>");
});