在javascript/jquery中使用逗号拆分将输入中的文本转换为显示为href链接

我试图用逗号分割文本，并将它们显示为链接。我将它们转换为文本，但不知道如何将它们转换为链接。我正在使用这个代码

$('.tags').keyup(function() {
var ref = $('.tags').val();
var str_array = ref.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
$('.tag').html($(this).val());
}
});

$（'.tags'）.keyup（函数（）{
var ref=$（'.tags'）.val（）；
var str_数组=ref.split（'，'）；
对于（var i=0；i

我得到的是

<span class="tag">hello, world</span>

你好，世界

我想要的是

<span class="tag"><a href="hello">hello</a>, <a href="world">world</a></span>

，

此解决方案使用纯JS完成。不需要JQuery

var tags=document.getElementById（“tags”）；
tags.addEventListener（“键控”，转换）；
函数转换（）{
让tag=document.getElementById（'tag'）；
tag.innerHTML=“”；
设str=tags.value；
设res=str.split（“，”）；
res.forEach（函数（元素、idx、数组）{
让逗号；
idx===array.length-1？逗号=“”：逗号=“”，”；
设trimmedElement=element.trim（）；
tag.innerHTML+=''+逗号；
});
}

---

此解决方案使用纯JS完成。不需要JQuery

var tags=document.getElementById（“tags”）；
tags.addEventListener（“键控”，转换）；
函数转换（）{
让tag=document.getElementById（'tag'）；
tag.innerHTML=“”；
设str=tags.value；
设res=str.split（“，”）；
res.forEach（函数（元素、idx、数组）{
让逗号；
idx===array.length-1？逗号=“”：逗号=“”，”；
设trimmedElement=element.trim（）；
tag.innerHTML+=''+逗号；
});
}

使用jQuery：

// Element Selector
let selector = $(".tag");

// Get Text
let text = selector.text();

// Remove extra characters
text = text.replace(/[^a-zA-Z ]/ig, '');

// Convert my text to array
let tags = text.split(" ");

// Empty the element
selector.html('');

// Append Tags
tags.forEach(function(tag){
    selector.append(`<a href="${tag}">${tag}</a> &nbsp;`)
});

//元素选择器
让选择器=$（“.tag”）；
//获取文本
让text=selector.text（）；
//删除额外字符
text=text.replace（/[^a-zA-Z]/ig'，）；
//将我的文本转换为数组
让标记=text.split（“”）；
//清空元素
html（“”）；
//附加标签
tags.forEach（函数（tag）{
selector.append（``）
});

使用jQuery：

// Element Selector
let selector = $(".tag");

// Get Text
let text = selector.text();

// Remove extra characters
text = text.replace(/[^a-zA-Z ]/ig, '');

// Convert my text to array
let tags = text.split(" ");

// Empty the element
selector.html('');

// Append Tags
tags.forEach(function(tag){
    selector.append(`<a href="${tag}">${tag}</a> &nbsp;`)
});

//元素选择器
让选择器=$（“.tag”）；
//获取文本
让text=selector.text（）；
//删除额外字符
text=text.replace（/[^a-zA-Z]/ig'，）；
//将我的文本转换为数组
让标记=text.split（“”）；
//清空元素
html（“”）；
//附加标签
tags.forEach（函数（tag）{
selector.append（``）
});

您可以在jQuery中执行以下操作：

var ref = $('.tags').val();
var str_array = ref.split(',');
var tagLinks = '';

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   tagLinks += '<a href="'+str_array[i]+'">'+str_array[i]+'</a>, ';
}

tagLinks = tagLinks.slice(0, -2);

$('.tag').html(tagLinks);

var ref=$（'.tags'）.val（）；
var str_数组=ref.split（'，'）；
var tagLinks=''；
对于（var i=0；i

您可以在jQuery中执行以下操作：

var ref = $('.tags').val();
var str_array = ref.split(',');
var tagLinks = '';

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   tagLinks += '<a href="'+str_array[i]+'">'+str_array[i]+'</a>, ';
}

tagLinks = tagLinks.slice(0, -2);

$('.tag').html(tagLinks);

var ref=$（'.tags'）.val（）；
var str_数组=ref.split（'，'）；
var tagLinks=''；
对于（var i=0；i

元素

内容是否可编辑？我看不出你怎么可能在它上面引起一个
keyup
事件。您的代码看起来非常混乱，
span
元素没有值，您正在设置元素的HTML以匹配不存在的值。。。我们可以看到您试图到达的终点，但起点不清楚。您使用的是
span
还是
输入
？这个值来自哪里？我怀疑它是一个普通的输入字段
$（'.tag'）.html（$（this.val（））
this.val将始终是原始的、未修改的值。是的，我在基本输入中获取文本。
.tags
元素
内容是否可编辑？我看不出你怎么可能在它上面引起一个
keyup
事件。您的代码看起来非常混乱，
span
元素没有值，您正在设置元素的HTML以匹配不存在的值。。。我们可以看到您试图到达的终点，但起点不清楚。您使用的是
span
还是
输入
？这个值来自哪里？我怀疑它是一个普通的输入字段
$（'.tag'）.html（$（this.val（））
this.val将始终是原始的、未修改的值。是的，我在基本输入中获取文本。感谢@Tom Marienfeld，它工作正常，但存在一个小的间距问题。键入“hello，world”后，世界与逗号后的空格链接，可以在其中添加trim函数吗？我添加了trim（）函数。没有更多的链接空间：-）这是解决方案，谢谢。谢谢@Tom Marienfeld它起作用了，但有一个小的间距问题。键入“hello，world”后，世界与逗号后的空格链接，可以在其中添加trim函数吗？我添加了trim（）函数。不再使用链接空间：-）这是解决方案，谢谢。