JavaScript - 匹配不在 或属性内的链接

Question

我正在尝试创建一个所见即所得的编辑器。目标是当用户粘贴或键入链接(即粘贴或 keyup(space) 事件)时，编辑器将实时检测它并辨别它是图像、视频还是其他内容。

我尝试使用 an answer for another question 中建议的一些库, 但那些坚持制作所有 url 的链接或导致其他问题。

我不确定最好的方法是什么。我尝试循环输入字段的内容，但我无法使用嵌套元素。因此，我尝试将 html 内容转换为字符串，然后替换其中的链接。

问题是链接不匹配，网上满是great regexes . 但我如何只匹配不在标签内或另一个标签的属性内的链接？

我尝试在字符串的末尾添加一个否定的前瞻 (?!(\|"|') (我知道这不是完美的解决方案)，但显然这不像我那样工作以为会。所以我完全迷失了这个。

$(function(){
  document.write(searchLinks("Sample text https://www.google.fi/images/srpr/logo11w.png and http://google.com/ <a href='http://bing.com/'>http://bing.com/</a>"));
});

function searchLinks(string){
	var urlRegex =/\bhttps?:\/\/[a-zA-Z0-9()^=+*@&%#|~?!;:,.-_/]*[-A-Za-z0-9+&@#/%=~_()|](?!(\<\/a\>|"|'))/g;
	console.log(string.match(urlRegex));
	string=string.replace(urlRegex, function(url){
		if(url.match(/\.gifv/)!=null){ //gifv
			return gifvToVideo(url);
		}else if(url.match(/\.(jpeg|jpg|gif|png|svg)/)!=null){ //image
			return "<img src='"+url+"' alt='"+url+"'>";
		}else if(url.match(/\.(mp4|webm)/)!=null){ //video
			return '<video><source src="'+url+'"></video>';
		}else{ //link
			return '<a href="'+url+'" target="_blank">'+url+'</a>';
		}
	});
	return string;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我认为第一个选项是创建一个 dom 结构并仅遍历顶级文本节点，例如

function searchLinks(html) {
    var $tmp = $('<div />', {
        html: html
    });
    var urlRegex = /\bhttps?:\/\/[a-zA-Z0-9()^=+*@&%#|~?!;:,.-_\/]*[-A-Za-z0-9+&@#\/%=~_()|](?!(\<\/a\>|"|'))/g;
    $tmp.contents().each(function () {
        if (this.nodeType == Node.TEXT_NODE) {
            var string = this.nodeValue;

            string = string.replace(urlRegex, function (url) {
                if (url.match(/\.gifv/) != null) { //gifv
                    return gifvToVideo(url);
                } else if (url.match(/\.(jpeg|jpg|gif|png|svg)/) != null) { //image
                    return "<img src='" + url + "' alt='" + url + "'>";
                } else if (url.match(/\.(mp4|webm)/) != null) { //video
                    return '<video><source src="' + url + '"></video>';
                } else { //link
                    return '<a href="' + url + '" target="_blank">' + url + '</a>';
                }
            });

            $(this).replaceWith(string)
        }
    })

    return $tmp.html();
}

演示:Fiddle