如何使用javascript用超链接替换单词？

Question

我想用我网站上每个帖子上的超链接替换一个单词[仅一次]，在我的例子中是“罗纳尔多”。所以，我使用了以下代码。document.body.innerHTML = document.body.innerHTML.replace('Ronaldo', '<a href="www.ronaldo.com">Ronaldo</a>');在我注意到这个问题之前，这确实很有效。post-title当我希望它只替换“in ”这个词时，它甚至替换了“Ronaldo”这个词post-body。这是我的代码的一瞥，以便您可以更好地理解。https://codepen.io/vkdatta27/pen/rNMGbmj [更新]如果有人提出解决此问题的方法，那将非常有帮助。我标记 jquery 和 ajax 因为它们也了解 javascript。注意：到目前为止，除了格式化目的POST-BODY P之外，我们没有使用任何类、IDS、标签等POST-TITLE

Answer 1

尝试这个 -

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>

Answer 2

假设您的post-body元素没有任何类名，我们可以通过使用查询它们.getElementsByTagName()，然后用链接替换文本

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>

Answer 3

如果您不想更改整个文档，请不要从 DOM 中获取整个内容。你说你只是想改变后身。因此，给帖子正文一个id（这样我们就可以在js中获取帖子正文）并仅更改其内容。

注意：要替换所有出现的“Ronaldo”，请使用replaceAll("word to replace")函数。

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>

只是上面代码片段的 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);

Answer 4

只是改变

文档主体

到

document.getElementById("ID") //相应的元素id即你的段落

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>

Answer 5

你需要使用replaceAll而不是replace

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

或者您可以使用regex（这也可以用作不区分大小写的替换）-

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

如果您不想更改课堂上的文本，post-title您可以使用not查询选择器 -

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>');

这只会选择第一个p没有 class 的 post-title。

如果您有多个p标签，请使用querySelectorAll并迭代它来替换文本。

或者，您可以向内容添加不同的类，并在查询选择器中使用此类。