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

Posted 2023-02-19

【中文标题】如何使用javascript用超链接替换单词？

【英文标题】：How to replace a word with hyperlink using javascript?

【发布时间】：2021-04-02 17:02:59

【问题描述】：

我想用我网站上每个帖子上的超链接替换一个词 [ONLY 1 TIME]，在我的例子中是“罗纳尔多”。所以，我使用了以下代码。

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

在我注意到这个问题之前，这真的很有效。

当我希望它仅替换 post-body 中的单词时，它甚至替换了 post-title 上的“罗纳尔多”一词。

这里是我的代码的一瞥，以便您更好地理解。

https://codepen.io/vkdatta27/pen/rNMGbmj [已更新]

如果有人说出解决此问题的方法，那将非常有帮助。我标记 jquery 和 ajax 因为他们也知道 javascript。

注意：直到现在，我们还没有使用任何类、ID、标签，例如 POST-BODY P 除了 POST-TITLE 用于格式化目的

【参考方案1】：

只是改变

文档.body

到

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>

【参考方案2】：

如果您不想更改整个文档，请不要从 DOM 中获取整个内容。你说你只是想改变post-body。所以给post body一个id（这样我们就可以在js中抓取post-body）并且只改变它的内容。

注意：要替换所有出现的“罗纳尔多”，请使用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>

只是上面sn-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);

【参考方案3】：

您需要使用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，它没有类post-title。

如果您的标签不止p，则使用querySelectorAll，然后对其进行迭代以替换文本。

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

【讨论】：

您好 nikhil，我只想替换帖子正文中的一次。 ReplaceAll 和 Regex 不适合。另外，我不会在我的帖子中使用<p> 标签。所以，`p:not(.post-title) 不起作用。

【参考方案4】：

假设你的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>

【讨论】：

你好哈沙那，

我不使用任何标签、类、ID，除了 .post-title