将单词转换为链接并在 html 中替换它们答案

【问题标题】：Convert words to links and replace them in html将单词转换为链接并在 html 中替换它们
【发布时间】：2019-09-25 12:50:37
【问题描述】：

我有一个包含动态名称的字符串（1 个或多个）.....我想将这些名称转换为超链接...并且这些超链接将包含这些名称..

例如。在字符串“john,jim,jean”......john 将被超链接并重定向到“www.abc.com/john”等等......

我已经通过 jquery 使用....访问了元素，因为它们是我使用 .children().text() 拆分的内部元素并将它们保存在 regs[]

<label>Ids: <span> john,jim,jean</span></label>

var strr=$('label:contains("IDs:")').children().text();

var regs = strr.split(",") 
var reg_length = regs.length;

我不想更改html中的文本，只想将它们转换为超链接。

比如点击john会重定向到www.abc.com/john等等其他名字。

不改变可见字符串john,jim,jean

【问题讨论】：

我没有得到两件事：“将包含那些名称数字” - 什么是名称数字？ “我不想更改 html 中的文本，只想将它们转换为超链接” - 然后在下一行中将文本转换为 html（否则如何添加链接）
另外，您的标签内容显示“Ids”（小“d”），而您的选择器正在寻找“IDs”（大写“D”）
嗨@Connum ...对不起......这次做对了，请再读一遍......不要担心D它在主代码中更正了......

标签： javascript jquery string loops dynamic

【解决方案1】：

我看到你用过jquery，所以我也会

regs = regs.map( s => $(`<a href='www.abc.com/${s}'>${s}</a>`) )

在 string templates 和 jquery 的帮助下，使用 map 从数组的每个项目中创建元素。

【讨论】：

很好的解决方案，向你致敬

【解决方案2】：

我希望这就是你要找的东西

let spanDom = $("label").find("span");
let str = $(spanDom).text().trim();

let s = str.split(",");

$(spanDom).empty();

s.forEach(function( name ) {
  $(spanDom).append("<a href='www.abc.com/"+name+"'>"+name+"</a>,");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ids: <span> john,jim,jean</span></label>

【讨论】：

【解决方案3】：

试试

let w = ["john", "jim", "jean" ];  // list of known words to link

data.innerHTML = data.innerHTML.replace(/\w+/g, 
  x=> w.includes(x) ? `<a href="www.abc.com/${x}">${x}</a>` : x)

&lt;label id='data'&gt;Ids: &lt;span&gt; john,jim,jean&lt;/span&gt;&lt;/label&gt;

【讨论】：

【解决方案4】：

只要您的字符串遵循逗号 (,) 或空格等常见分隔模式，这完全可以实现。我假设你在字符串中的名字用逗号和空格分隔", " 我将在没有 jQuery 的情况下显示它。首先，包含字符串的<span> 元素需要有一个ID。另外，我添加了一个<p> 作为超链接的占位符。

<span id="names">John, Jim, Jean </span>
<p id="hps"></p>

现在是 JavaScript：

nameString = document.getElementById("names").innerHTML; //get the string from <span>

nameArray = nameString.split(", "); 
//This method will take the string and break it down wherever it finds the occurrence of the argument (here ", ") and remove these characters and the individual broken down strings are returned as an array 
//nameArray has all the names stored in an array
//Let's create an array links that will hold all your <a> elements
links = new Array();
len = nameArray.length; //Get the length of the array i.e. number of names
for (i = 0; i < len; i++) {
   links[i] = document.createElement("a"); //create an <a> tag
   links[i].setAttribute("href", "www.abc.com/"+nameArray[i]); //Set its href
   links[i].innerHTML = nameArray[i]; //Add Link names i.e. contents inside <a></a>
   document.getElementById("hps").appendChild(links[i]); //append these links as childs to the <p> parent tag
}

【讨论】：