Question posted in
You can find the official documentation here.

How to replace a word with hyperlink using javascript? – Jquery ajax

I want to replace a word [ONLY 1 TIME], in my case ‘Ronaldo’, with hyperlink on EVERY post on my site. So, I used the following code.

document.body.innerHTML = document.body.innerHTML.replace('Ronaldo', '<a href="www.ronaldo.com">Ronaldo</a>');

That really worked well until i noticed the issue.

It’s even replacing the word ‘Ronaldo’ on post-title when i want it to replace the word in post-body only.

Here’s a glimpse of my code so you can have a better understanding.

https://codepen.io/vkdatta27/pen/rNMGbmj [UPDATED]

It would be very helpful if someone says a way to fix this issue. I’m tagging jquery and ajax because they too know javascript.

NOTE: UNTIL NOW, WE DIDN’T USE ANY CLASSES, IDS, TAGS LIKE POST-BODY P EXCEPT POST-TITLE FOR FORMATTING PURPOSE

Tags:

5

Answers


  1. 0

    Assume that your post-body elements don’t have any class names, we can query them by using .getElementsByTagName() and then replace the text with link

    postBodyElems = document.getElementsByTagName("p");
for (var i = 0; i < postBodyElems.length; i++) {
  if (postBodyElems[i].className == '') {
    postBodyElems[i].innerHTML = postBodyElems[i].innerHTML.replace('Ronaldo', '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');
  }
}
    .post-title {
  font-size: 20px;
}

.warning {
  color: red;
}

a {
  color: blue;
}
    <p class='post-title'>Ronaldo became the hottest player of 2020</p>
<p>Ronaldo [<span class='warning'>I want this text to turn into a hyperlink</span>] dos Santos Aveiro GOIH ComM (Portuguese pronunciation: [kɾiʃˈtjɐnu ʁɔˈnaɫdu]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Serie
  A club Juventus and captains the Portugal national team. Often considered the best player in the world and widely regarded as one of the greatest players of all time,[10] Ronaldo has won five Ballon d'Or awards[note 3] and four European Golden Shoes,
  both of which are records for a European player. He has won 30 major trophies in his career, including seven league titles, five UEFA Champions Leagues, one UEFA European Championship, and one UEFA Nations League title. Ronaldo holds the records for
  the most goals (134) and assists (41) in the history of the UEFA Champions League.[11] He is one of the few recorded players to have made over 1,000 professional career appearances and has scored over 750 senior career goals for club and country.[12]
  He is also the second player to score 100 international goals, and the first European to achieve the feat.[13]</p>
    Login or Signup to reply.
  2. 0

    You need to use replaceAll instead of replace

    document.body.innerHTML = document.body.innerHTML.replaceAll('Ronaldo', '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');

    Or you can use regex (this will also work as case insensitive replace) –

    document.body.innerHTML = document.body.innerHTML.replace(/Ronaldo/gi, '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');

    And If you do not want to change the text in class post-title you can use not query selector –

    document.querySelector("p:not(.post-title)").innerHTML = 
document.querySelector("p:not(.post-title)").innerHTML.replaceAll('Ronaldo', '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');

    This will only select first p which does not have class post-title.

    If you have more than just p tags, then use querySelectorAll and then iterate over this to replace text.

    Alternatively, you can add different class to your content and use this class in query selector.

    Login or Signup to reply.
  3. 0

    Don’t grab whole content from DOM if you don’t want to change whole document. You said you just want to change post-body. So Give a id to post body (so we can grab post-body in js) and change only it’s content.

    Note: To replace all "Ronaldo" occurrences, use replaceAll("word to replace") function.

    document.getElementById("post-body").innerHTML = document.getElementById("post-body").innerHTML.replaceAll('Ronaldo', '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');
    .post-title {
  font-size: 20px;
}

.warning {
  color: red;
}

a {
  color: blue;
}
    <p class='post-title'>Ronaldo became the hottest player of 2020</p>

<!--Give the following p element an id, so we can get that element in js. I gave the 'post-body' id. -->
<p id='post-body'>Ronaldo [<span class='warning'>I want this text to turn into a hyperlink</span>] dos Santos Aveiro GOIH ComM (Portuguese pronunciation: [kɾiʃˈtjɐnu ʁɔˈnaɫdu]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Serie
  A club Juventus and captains the Portugal national team. Often considered the best player in the world and widely regarded as one of the greatest players of all time,[10] Ronaldo has won five Ballon d'Or awards[note 3] and four European Golden Shoes,
  both of which are records for a European player. He has won 30 major trophies in his career, including seven league titles, five UEFA Champions Leagues, one UEFA European Championship, and one UEFA Nations League title. Ronaldo holds the records for
  the most goals (134) and assists (41) in the history of the UEFA Champions League.[11] He is one of the few recorded players to have made over 1,000 professional career appearances and has scored over 750 senior career goals for club and country.[12]
  He is also the second player to score 100 international goals, and the first European to achieve the feat.[13]</p>

    Just the clean version of above snippet’s js.

    const postBody = document.getElementById("post-body");
const ronaldoLink = '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>'

postBody.innerHTML = postBody.innerHTML.replaceAll('Ronaldo', ronaldoLink);
    Login or Signup to reply.
  4. 0

    Just change

    document.body

    to

    document.getElementById("ID") //respective element id i.e your paragraph

    document.getElementById("post-body").innerHTML = document.getElementById("post-body").innerHTML.replaceAll('Ronaldo', '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');
    .post-title{
  font-size:20px;
  }
.warning{
 color:red;
  }
a{
  color:blue;
  }
    <p class='post-title'>Ronaldo became the hottest player of 2020</p>
<p id='post-body'>Ronaldo [<span class='warning'>I want this text to turn into a hyperlink</span>] dos Santos Aveiro GOIH ComM (Portuguese pronunciation: [kɾiʃˈtjɐnu ʁɔˈnaɫdu]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Serie A club Juventus and captains the Portugal national team. Often considered the best player in the world and widely regarded as one of the greatest players of all time,[10] Ronaldo has won five Ballon d'Or awards[note 3] and four European Golden Shoes, both of which are records for a European player. He has won 30 major trophies in his career, including seven league titles, five UEFA Champions Leagues, one UEFA European Championship, and one UEFA Nations League title. Ronaldo holds the records for the most goals (134) and assists (41) in the history of the UEFA Champions League.[11] He is one of the few recorded players to have made over 1,000 professional career appearances and has scored over 750 senior career goals for club and country.[12] He is also the second player to score 100 international goals, and the first European to achieve the feat.[13]</p>
    Login or Signup to reply.
  5. 0

    Try this –

    postBodyElems = document.getElementsByTagName("p");
for (var i = 0; i < postBodyElems.length; i++) {
  if (postBodyElems[i].className == '') {
    postBodyElems[i].innerHTML = postBodyElems[i].innerHTML.replace('Ronaldo', '<a href="https://en.wikipedia.org/wiki/Cristiano_Ronaldo">Cristiano Ronaldo</a>');
  }
}
    .post-title {
  font-size: 20px;
}

.warning {
  color: red;
}

a {
  color: blue;
}
    <p class='post-title'>Ronaldo became the hottest player of 2020</p>
<p>Ronaldo [<span class='warning'>I want this text to turn into a hyperlink</span>] dos Santos Aveiro GOIH ComM (Portuguese pronunciation: [kɾiʃˈtjɐnu ʁɔˈnaɫdu]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Serie
  A club Juventus and captains the Portugal national team. Often considered the best player in the world and widely regarded as one of the greatest players of all time,[10] Ronaldo has won five Ballon d'Or awards[note 3] and four European Golden Shoes,
  both of which are records for a European player. He has won 30 major trophies in his career, including seven league titles, five UEFA Champions Leagues, one UEFA European Championship, and one UEFA Nations League title. Ronaldo holds the records for
  the most goals (134) and assists (41) in the history of the UEFA Champions League.[11] He is one of the few recorded players to have made over 1,000 professional career appearances and has scored over 750 senior career goals for club and country.[12]
  He is also the second player to score 100 international goals, and the first European to achieve the feat.[13]</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search