javascript - 正则表达式未检测到 javascript contenteditable div 中的 youtube 链接

Question

我正在使用这个脚本来检测粘贴到 contenteditable div 中的 youtube URLS 并替换为可嵌入代码。

这在粘贴纯文本 youtube URL 时有效，但它不会检测或替换粘贴为可点击链接的 URL。

我如何修改代码以替换纯文本 YouTube 链接和粘贴的可点击链接？

$.Redactor.fn.formatLinkify = function(protocol, convertLinks, convertImageLinks, convertVideoLinks)
{
    var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g,
        url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g,
        urlImage = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/gi,
        urlYoutube = /.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;

    var childNodes = (this.$editor ? this.$editor.get(0) : this).childNodes, i = childNodes.length;
    while (i--)
    {
        var n = childNodes[i];
        if (n.nodeType === 3)
        {
            var html = n.nodeValue;

            // youtube
            if (convertVideoLinks && html && html.match(urlYoutube))
            {
                html = html.replace(urlYoutube, '<iframe width="560" height="315" src="//www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe>');
                $(n).after(html).remove();
            }

            // image
            else if (convertImageLinks && html && html.match(urlImage))
            {
                html = html.replace(urlImage, '<img src="$1">');
                $(n).after(html).remove();
            }

            // link
            else if (convertLinks && html && (html.match(url1) || html.match(url2)))
            {
                html = html.replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(url1, '$1<a href="' + protocol + '$2">$2</a>$3')
                .replace(url2, '$1<a href="$2">$2</a>$5');

                $(n).after(html).remove();
            }
        }
        else if (n.nodeType === 1 && !/^(a|button|textarea)$/i.test(n.tagName))
        {
            $.Redactor.fn.formatLinkify.call(n, protocol, convertLinks, convertImageLinks, convertVideoLinks);
        }
    }
};

Answer 1

由于您从该行的递归调用中排除了 anchor (<a> 标签)，因此未处理任何链接:

else if (n.nodeType === 1 && !/^(a|button|textarea)$/i.test(n.tagName))

您应该通过将正则表达式更改为来允许它们

/^(button|textarea)$/i

或使用其他一些条件来确保链接(或其 href 属性)得到处理。

比如遇到一个链接，可以测试它的href属性(property)反对urlYoutube正则表达式。

查看此 jsFiddle了解更多详情。