JSFiddle - React, Tailwind, and code Playground

by Cory Hughes

HTML

<div>here is @ that we are @ replacing</div>
<div>here is another @ that we are replacing {variableName}</div>
<input id=idBut type=button value="replace @ with $" />
<br><br><br>
<input id=outputBtn type=button value="CLICKY" />
<div id="output" style="border: solid 2px #ff0000;padding: 10px;">Output...</div>

JavaScript

var textReplace = "Replaced"
var text = "This text is to be <<variable>>!"
$("#idBut").click(function() {
    $("body").children().each(function() {
        $(this).html($(this).html().replace(/@/g,"$"));
        $(this).html($(this).html().replace(/{variableName}/g, textReplace));
    });
});

//$("body").children().each(function() {
    //$(this).html($(this).html().replace(/@/g,"$"));
    //$(this).html($(this).html().replace(/<<variable>>/g, textReplace));
    
//});

$('#outputBtn').click(function() { 
    text.replace('%s', $('#output').text());
});