Dectectando URLs & youtube links - Javascript

in #youtube7 years ago (edited)

Este script detecta urls y las convierte en enlaces. También detecta los saltos de linea y los espacios. Y además los enlaces de youtube los inserta en un iFrame para que puedan ser visualizados.

This script detects urls and put it as a link. It preserves the original text format, and gets youtube urls into an iFrame to see them like an embed video.

Ya he detectado algunas funciones repetitivas y en breve las estaré corrigiendo, si tambien las detectaron pueden avisarme y nos sirve de práctica.

<script>
    function linkify(text, contexto) {
        $('#previsual').empty();//Vaciando div con id previsual
        
        /*conservar formato*/
        text = text.replace(/\n/g, '<br>');//Saltos de linea
        text = text.replace(/ /g, '&nbsp;');//Espacios en blanco

        /*Detectando videos de youtube y dailymotion*/
        if (text.includes("/watch?v=") || text.includes("youtu.be/") || text.includes("/video/") || text.includes("dai.ly/")) {
            var find, repl;
            if (text.includes("/watch?v=")) {//youtube
                find = /watch[?]v[=]/ig;
                repl = 'embed/';
            } else if (text.includes("youtu.be/")) {//youtube
                find = '.be';
                repl = 'be.com/embed';
            } else if (text.includes("/video/")) {//dailymotion
                find = '/video';
                repl = '/embed/video';
            } else { //dailymotion
                find = '.ly';
                repl = 'lymotion.com/embed/video';
            }
            var res = text.replace(find, repl);
            var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
            return res.replace(urlRegex, function (url) {
                var cad = '<div class="embed-container"><iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe></div>';//previsual embed video
                if (contexto == 1) $('#previsual').html(cad);
                else if (contexto == 2) $('#preVisualMsj').html(cad);
                return cad
            })
        } else {
            var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
            return text.replace(urlRegex, function (url) {
                return '<a href="' + url + '" target="_blank" class="enlace">' + url + '</a>';
            })
        }
    }
</script>

despues solo se llama la funcion mientras se está escribiendo en el textarea:
Then call the function while still writing:

linkify(string,1)/*el valor dos es para otro textarea de mi proyecto. 1 is to enable previsualizing */

y cuando ya se publicó:
When publication is done:

linkify(string,0)/*El valor 0 es para desactivar la previsualización de los iFrames. 0 to disable previsualization */