How to replace word in a paragraph using Javascript-CodePudding

I am new to JS and would like to add words to a sentence or replace words, specfically like this:

HTML file:

<body>
<p id="paragraph"> 
My name is <first> <last>. I have been at ... for <years> and plan to <goals> after completing my courses. <p>

  <script src="script.js">
    var paragraph = document.getElementById("paragraph");
    paragraph.replace("first", "firstName");
    paragraph.replace("last", "lastName");
    paragraph.replace("years", "yearsOfStudy ");
    paragraph.replace("goals", "goal");
    
  </script>
<body>

JS file:

let firstName = "Max";
let lastName = "Jones";
let yearsOfStudy = "about a year";
let goal = "getting a job as a software developer";

This isnt working as intended but I dont know why. Please help me figure this out, it doesnt matter if its using the replace method or another method as long as the varibales declared in the JS file are being used and an inline script is used to insert those words into the text.

CodePudding user response：

Looks like a good use for template strings. This is done with backticks `` and you can insert variables like this ${myVariable}

let firstName = "Max";
let lastName = "Jones";
let yearsOfStudy = "about a year";
let goal = "getting a job as a software developer";

const myText = `My name is ${firstName} ${lastName}. I have been at ... for ${yearsOfStudy} and plan to ${goal} after completing my courses.`

Now your string(myText) is set up - you just need to put it into the <p> tag. Let's use innerText for that.

document.getElementById('paragraph').innerText = myText

let firstName = "Max";
let lastName = "Jones";
let yearsOfStudy = "about a year";
let goal = "getting a job as a software developer";

const myText = `My name is ${firstName} ${lastName}. I have been at ... for ${yearsOfStudy} and plan to ${goal} after completing my courses.`

document.getElementById('paragraph').innerText = myText

<p id="paragraph"></p>

CodePudding user response：

You can simply string.replace. Besides that, it's not working because a script tag will either have a src attribute that links to a JS file or have inline JS. You can't combine those. Instead, you can simply use two script tags:

<p id="paragraph">My name is <first> <last>. I have been at ... for <years> and plan to <goals> after completing my courses.<p>
<script src="script.js"></script>
<script>
  const p = document.getElementById("paragraph");

  p.innerHTML = p.innerHTML
    .replace("<first>", firstName)
    .replace("<last>", lastName)
    .replace("<years>", yearsOfStudy)
    .replace("<goals>", goal);
</script>

Also notice that the inline script tag must come after your link to the script or those variables will not be defined.

CodePudding user response：

You can create custom tags yourself.

To access those custom tags, you can use getElementsByTagName

The index [0] indicates the first occurrence of that tag, you can use [1] and so on if there are many occurrence of that tag.

const first = document.getElementsByTagName("first")[0];
const last = document.getElementsByTagName("last")[0];
const years = document.getElementsByTagName("years")[0];
const goals = document.getElementsByTagName("goals")[0]

let firstName = "Max";
let lastName = "Jones";
let yearsOfStudy = "about a year";
let goal = "getting a job as a software developer";

first.innerText = firstName;
last.innerText = lastName;
years.innerText = yearsOfStudy;
goals.innerText = goal;

<body>
<p id="paragraph"> 
My name is <first></first> <last></last>. I have been at ... for <years></years> and plan to <goals></goals> after completing my courses. </p>
</body>