How do i replace letters with other letters onclick?

Question

I would like to be able to type a word or name into an box, click a generate button and have some of the letters or words changed into a new box.

For example: John Smith > Juhn Smith (change the 'o' to 'u' making Juhn Smith) or John Smith > Ron Smith (change whole words)

I have tried looking at strings and replacewith() etc but have struggled to find anything suitable especially nothing using input boxes.

This is an example close to what i mean but much more complex:

http://anu.co.uk/brazil/

Thanks

Thanks for getting back. Only this so far... Enter your name:
John Smith — James, Apr 26 '17 at 18:07

score 0 · Answer 1 · answered Apr 27 '17 at 17:11

@James When asking for help, next time try to do it yourself. This is an HTML page showing your example. Save this as myPage.html. Then open the file in a browser.

<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<head>
<title>Replace web page</title>
</head>
<script type="text/javascript" >
    // this gets called by pressing the button
    function myFunction() {
        var first = document.getElementById("foreName");
        var last = document.getElementById("lastName");
        // now change 'o' to 'u' for each name part
        var changedFirst = myChange(first.value);
        var changedLast = myChange(last.value);
        // now move it to another element
        var resultBox = document.getElementById("resultBox");
        resultBox.innerHTML = "" + changedFirst + " " + changedLast;
        }

    // this is a function to search a string and replace with a substitute
    function myChange(str) {
        var arr = str.split('');
        var result = "";
        for(var i=0; i < arr.length; i++) {
            if (arr[i] == 'o')  // if it's an o
                result += 'u';  // replace it with 'u'
            else 
                result += arr[i];
        }
    return(result);
}
</script>
<body>
    <p> This is an example of inputting text, changing it, then displaying it into another item</p>
    First Name:  <input type="text" name="foreName" id="foreName" maxlength=100 value="">
    Last Name:   <input type="text" name="lastName" id="lastName" maxlength=100 value="">
  <p>
      <input type="button" id="inButton" name="inButton" value="Click Me" onclick="myFunction()" >
   </p>

<p>
 <textarea rows="1" cols="50" id="resultBox"></textarea> 
</p>

</body>
</html>

How do i replace letters with other letters onclick?

1 Answers1