How can I replace several words in a statement using javascript?-CodePudding

I am new to programming and I want to know the javascript to use to replace several words in a statement. As an example I have made a "story" as the statement and I would like to be able to replace "character" with a name that has been entered in the name-input-field and if the character's sex is selected as "female" (on the drop down list) to replace he/his/him with she/her in the story.

I have put both my HTML and Javascript below, however the Javascript is not complete as I don't know how to perform the replacement. I presume that Javascript string replace would be needed? Can any body help me with this?

My HTML is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>

  <div >
    <h1>Story</h1>
    <form> 
      <label>Character's Name:</label>
      <input  type="text"></input>
      <br>
      </form>
      <br>
    <br>
    <form> 
      <label for="sex">Character's sex?</label>  
      <select name="sex" id="maleFemale">
          <option disabled hidden selected>Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
      </select>  
    </form>
    <br>
    <button >Submit</button>
    <br>
    </div>
  <h3 ></h3>
  <p ></p>
  <script src="test3.js"></script>
</body>
</html>

And this is my Javascript so far:

var nameInput = document.querySelector (".name-input-field");
var maleFemale = document.querySelector ("#maleFemale");
var statement = document.querySelector(".statement");
var submitButton = document.querySelector(".submit");


submitButton.addEventListener("click", ()=>{

    
    statement.innerText = 

       `Character woke up and he immediately got dressed. His clothes were hanging on the chair and   so he put them on. His friend asked him if he was going to work; character told his friend that he was.`

    });

CodePudding user response：

i think you can use replace method to replace any word.

    let message = "this is character"
    message = message.replace("character", "he/she/anything");
    console.log(message)

CodePudding user response：

I would use Regex for it, it looks a bit messy now because i made it quit and not with mappings or for loop, but this should give you the general idea.

The \b...\b in Regex is for wrapping words, to make sure he is replaced and not the which includes he aswell.
The i in the character regex is for case insensivity
The g is used for global, it is necessary in Regex for replaceAll

const submitButton = document.querySelector(".submit");
    const statement = document.querySelector(".statement");

submitButton.addEventListener("click", () => {
    const nameInput = document.querySelector("#name-input-field").value;
    const maleFemale = document.querySelector("#maleFemale").value;


    const textTemplate = `Character woke up and he immediately got dressed. His clothes were hanging on the chair and so he put them on. His friend asked him if he was going to work; character told his friend that he was.`
  
  let fittedText = textTemplate.replace(/\b(character)\b/ig, nameInput)
  if(maleFemale === "female") {
  fittedText = fittedText.replaceAll(/\b(he)\b/g,"she").replaceAll(/\b(He)\b/g,"She").replaceAll(/\b(his)\b/g,"her").replaceAll(/\b(His)\b/g,"Her").replaceAll(/\b(him)\b/g,"her").replaceAll(/\b(Him)\b/g,"Her")
  }
  
    statement.innerText = fittedText
    

});

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div ><h1>Story</h1><form><label>Character's Name:</label><input id="name-input-field" type="text"></input><br></form><br><br><form><label for="sex">Character's sex?</label><select name="sex" id="maleFemale"><option disabled hidden selected>Select</option><option value="male">Male</option><option value="female">Female</option></select></form><br><button >Submit</button><br></div><h3 ></h3><p ></p><script src="test3.js"></script></body></html>