html - How to replace a word with hyperlink using javascript?

Question

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

Answer 1

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>