How to: page with 2 text fields, replace character when hitting button - text

Question

I'm not a developer myself and even though html and css are kinda familiar to me, php and more advanced languages are not so please bear with me 😉
I want to have a simple html page (or php or whatever is necessary for this case) with 2 text fields and a button
What I want is to paste text into Field 1 and when I hit the Convert button, it will convert certain characters and show it in Field 2.
Example: I paste "I wanna go for a walk in the park" in Field 1. Hit Convert and Field 2 will show me "I w#nn# go for # w#lk in the p#rk"
(I know this is a silly example, but just so you can understand what I want to achieve).
I just need it to convert 1 single character at this point, so basically there's only 1 "variable".
Hope it makes and you guys can help me with it.
Thanks and stay safe!
Tiago 😊

Answer 1

html file
<input id="input_data" type="text">
<button id="convert">Convert</button>
<div>
<h1>Output</h1>
<p id="output"></p>
</div>
<script type="text/javascript">
document.getElementById("convert").onclick = function(){
var input = document.getElementById("input_data").value;
// your choice
var convert_from = "a";
var convert_to = "o";
var finalString = (input.split(convert_from.toUpperCase()).join(convert_to.toUpperCase())).split(convert_from).join(convert_to);
document.getElementById("output").textContent = finalString;
copyToClipboard(finalString);
}
// You can copy some text to clipboard only by selecting an element
function copyToClipboard(content){
// Create a textarea
var textHolder = document.createElement('textarea');
// Assign the value
textHolder.value = content;
// Appent the textarea to body
document.body.appendChild(textHolder);
// "Focus the action" on the textHolder
textHolder.select();
textHolder.setSelectionRange(0, 99999); /*For mobile devices*/
// Copy the content from selected element
document.execCommand('copy');
// Remove the textarea from body
document.body.removeChild(textHolder);
}
</script>
I hope it helps! ^_&