Question

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

这适用于粘贴纯文本youtube URLS，但它不会检测或替换粘贴为可点击链接的URL。

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

$.Redactor.fn.formatLinkify = function(protocol, convertLinks, convertImageLinks, convertVideoLinks)
{
    var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
        url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/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

由于您从此行中的递归调用中排除了锚点（<a>标记），因此未处理任何链接：

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

您应该通过将正则表达式更改为

来允许它们

/^(button|textarea)$/i

或使用一些其他条件来确保处理链接（或其href属性）。

例如，如果遇到链接，可以针对href regEx测试其urlYoutube属性。

有关详细信息，请参阅此jsFiddle。

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

1 个答案: