JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<button id="run">Погнали наши городских!</button>
<h3>Картина, которую наблюдаем до замены тегов:</h3>
<div>
    <p>Какой-то текст</p>
    <pre>


        Текст, заключенный  
                             в тэг &lt;pre&gt;
    </pre>
    <h1>Ещё какой-то текст</h1>
    <pre>
    И          это
    так же

        текст, заключенный в тэг &lt;pre&gt;
    </pre>
</div>

CSS

p {
    color: #060;
}
h1 {
    color: #900;
}
.changed {
    color: #F00;
}
h3 {
    font-size: 1.2em;
    text-decoration: underline;
}

JavaScript

$('#run').click(function(){
    $('div pre').each(function(){
        $(this).replaceWith('<span class="changed">' + $(this).html() + '<span>');
    });
    $('h3').text('А так - видим контент с изменениями:');
});