从 div 中获取特定文本并制作成链接答案

【问题标题】：Get specific text from a div and make into a link从 div 中获取特定文本并制作成链接
【发布时间】：2021-07-06 08:38:47
【问题描述】：

我不确定这是否可能，我一直在尝试使用 jQuery，但还没有走远。

我想从 div 中获取文本并将它们转换为链接。

问题是我希望这 3 个名称成为单独的链接，例如 href="/staff/john" 、 href="/staff/sarah" 和 href="/staff/mike"

任何帮助将不胜感激。

<div id="container">
john, sarah, mike
</div>

【问题讨论】：

标签： javascript html jquery text hyperlink

【解决方案1】：

像这样 - 不需要 jQuery

const container = document.getElementById("container");
container.innerHTML = container.textContent.split(",")
  .map(name => `<a href="/staff/${name.trim().toLowerCase().replaceAll(" ","-")}">${name.trim()}</a>`)
  .join(", ")

<div id="container">
John Doe, Sarah Doe, Mike Hunt
</div>

但如果你想要 jQuery，你可以这样做

$("#container").html(function() {
  return $(this).text().split(",")
    .map(name => `<a href="/staff/${name.trim().toLowerCase().replaceAll(" ","-")}">${name.trim()}</a>`)
    .join(", ")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  John Doe, Sarah Doe, Mike Hunt
</div>

【讨论】：

你太棒了，谢谢你的魅力。还有一个问题是有一种方法可以在我实际使用的名字之间有空格时添加一个“-”有一个名字和姓氏