使用JavaScript正则表达式将URL转换为HTML的<a>标签，将图片URL转换为<img>标签。

Question

我正在尝试编写一个函数，从文本区域中的正常链接创建a标签，从图像链接创建img标签。第一次对两者都起作用，但如果我粘贴一个"a href"标签，则会重复链接。由于imageRegex的检查，它不会处理图像。有没有什么办法让它工作？

请注意，文本区域可能具有多个这两种类型的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);         
});

- Chris Brickhouse

---

+1 - 这是一个学习练习还是工作需求？如果是后者，我建议使用jQuery实现。 - Adam Rackis

这是我运营的一个音乐留言板相关的编程内容。当我能够让正则表达式工作时，我将把此功能切换到jQuery，但正则表达式本身不会改变。 - Chris Brickhouse

请注意，如果您想正确地完成这项任务，有很多需要注意的事项。请参阅我对类似问题的回答以获取一些有用的链接。 - ridgerunner

@David - 当我发表评论时，他已经在使用jQuery这一点并不明显。他在问题中添加了很多代码。 - Adam Rackis

我解决了这个问题！ - Joe Thomas

Answer 1

我不太擅长jQuery，但我用原生JS解决了你的问题。看看这个fiddle链接吧！http://jsfiddle.net/dv0s5onj/

 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;

- Joe Thomas