将url转换为html<；a>；指向<；的标记和图像url；img>；使用javascript正则表达式标记

我正在尝试编写一个函数，用常规链接创建标签，用文本区域中的文本创建图像链接创建标签

这两种方法第一次都可以使用，但如果我在其中粘贴一个“a href”标记，它会将其双重链接。由于imageRegex检查，它不会生成图像。你有什么办法让它工作吗

请记住，textarea可以有两种类型的多个URL

$("#message").blur(function() {  
    var imageRegex = /\.(png|jpg|jpeg|gif)$/;
    var s = $(this).val().replace(/(?:^|[^"'])(\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|])/gim, function(str) {
        if (str.match(imageRegex)) {
            return('<img src="' + str + '" />');
        } else {
           return('<a href="' + str + '">' + str + '</a>');
        }       
    });  
    $(this).val(s);         
});

$（“#消息”）.blur（函数（）{
var imageRegex=/\（png | jpg | jpeg | gif）$/；
var s=$（this.val（）.replace（/（？：^.[^“'））（\b（？：https？| ftp）：\/\/[a-z0-9-+&@#\/%？=~！：，.；]*[a-z0-9-+&@#\/%=~|]/gim，函数（str）{
if（str.match（imageRegex））{
返回（“”）；
}否则{
返回（“”）；
}       
});  
$（此）.val（s）；
});

我不擅长jQuery，但我为你的问题提供了一个vanillaJS解决方案。看看这个小提琴

var yourString=document.getElementById（'message'）.innerHTML；
var计数=0；
var url=yourString.match（/（？：^[^“'））（\b（？：https？| ftp）：\/\/[a-z0-9-+&@#\/%？=～|！：，.；]*[a-z0-9-+&@#\/%=～|]/gim）；
//创建一个URL数组
forEach（函数（v，i，a）{
var n=yourString.indexOf（v，count）；//获取字符串的位置
if（v.match（/\（png | jpg | jpeg | gif）$/）==null）{//检查图像是否
//如果链接，请用新的锚定标记替换字符串
yourString=strSplice（yourString，n，v.length，”）；
count+=（v.length*2）+16；//如果有多个相同的url，则增加count。
}否则{
//如果链接使用img标记替换字符串
yourString=strSplice（yourString，n，v.length，”）；
count+=v.length+14；//如果有多个相同的url，则增加count。
}
});
//一个用于拼接字符串的函数，我在另一个StackOverflow问题中找到了该函数。
函数strSplice（str、index、count、add）{
返回str.slice（0，索引）+（添加| |“”）+str.slice（索引+计数）；
}
//用字符串替换元素的值
document.getElementById（'message'）。innerHTML=yourString；

+1-这是学习练习还是工作？如果是后者，我建议使用jQuery。这是我运行的音乐留言板。当我可以让正则表达式正常工作时，我将把这个函数切换到jquery，但是正则表达式本身无论如何都不会改变。我明白了。我会在网站允许的时候发布答案，供其他人使用现在我遇到的问题不是试图链接一个已经链接过一次的url。标记有问题时，使用img标记要注意，若您想正确地执行此操作，会有很多问题。请参阅：以获取一些有用的链接。

 var yourString=document.getElementById('message').innerHTML;

var count=0;

var urls=yourString.match(/(?:^|[^"'])(\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|])/gim);
// Make an array of urls

urls.forEach(function(v,i,a){
    var n =    yourString.indexOf(v,count); //get location of string

    if(v.match(/\.(png|jpg|jpeg|gif)$/)===null){// Check if image 
        // If link replace yourString with new  anchor tag
        yourString  = strSplice(yourString,n,v.length,'<a href="'+v+'">'+v+'</a>');
        count += (v.length*2)+16;// Increase count incase there are multiple of the same url.
    }else{
        // If link replace yourString with img tag
        yourString  = strSplice(yourString,n,v.length,'<img src="'+v+'" height="120px;" width="120px;"/>');
       count += v.length+14;// Increase count incase there are multiple of the same url.
    }
});

// A function to splice strings that I found on another StackOverflow Question.
function strSplice(str, index, count, add) {
  return str.slice(0, index) + (add || "") + str.slice(index + count);
}

//Replace the value of your element with your string
document.getElementById('message').innerHTML=yourString;