How to replace word in a paragraph using Javascript

Question

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.

You have a bunch of problems. Your templates are interpreted as tags, your script tag has both a src and content, your replace calls are looking for strings that don't exist, your getElementById returns an element (not the text in the element), the second argument in your replace calls is a string (not a variable reference), and the variables in your JS file won't be available the way you're expecting. I suggest reading up on each of those topics (innerText/innerHtml, script tags, string.replace, and scope) and seeing what fixes you're able to implement. — user5774952
– user5774952, Commented Jan 8, 2023 at 6:00
Are you saying that your HTML contains the literal exact string: My name is <first> <last>. I have been [...] and you want to dynamically replace them with your variables? If that's so, make sure not to forget to escape them (use < and > instead of < and >, respectively.); — code
– code, Commented Jan 8, 2023 at 6:17
You need two script tags. Script tags with src can't contain any JS inside. — code
– code, Commented Jan 8, 2023 at 6:22

Jash1395 · Accepted Answer · 2023-01-08 06:02:41Z

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>

code · Accepted Answer · 2023-01-08 06:24:11Z

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.

Not A Robot · Accepted Answer · 2023-01-08 06:02:17Z

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>

Collectives™ on Stack Overflow

How to replace word in a paragraph using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related