[Vuejs]-How to filter YouTube URL when entered in a input?

by

1👍

✅

The following steps happen when a user copy/paste any url.

  1. In background, client (browser) sends an AJAX request to the server with that URL.

  2. Server then further performs an HTTP GET request on that URL

  3. Then parses the returned HTML and extracts title, description and images.

  4. Server bundles this information as JSON response and sends it back to the client.

  5. Client then display the result to the user

👤Zayn Ali

1👍

An idea as to how you can achieve the stated goal perhaps

<form name='bert'>
    <textarea name="comment" cols="80" rows="10">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Fusce volutpat euismod mauris in https://www.youtube.com/watch?v=ObFligo1hK8 luctus. 
       Sed tempus velit et ipsum vehicula gravida sed in urna.
</textarea>
</form>

<script>
    var pttn=/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/gi;
    var text=document.querySelector( 'form[ name="bert" ] > textarea[ name="comment" ]' );

        text.onchange=function(e){
            var col=this.value.match(pttn);
            if( col.length > 0 ){

                /* an url or some urls of some sort was/were found in the given text */
                col.forEach(function(url,i,a){
                    console.info(url);

                    /* try to fetch the url */
                    fetch( url, { mode:'no-cors', method:'get' } ).then( function(r){
                        /* Process the resonse: this is where the next piece of work is.... using `canvas` perhaps?  */
                        console.log(r)

                    }).catch( function( err ){
                        alert( err )
                    });
                });
            }
        }.bind( text );
</script>
👤Professor Abronsius

Leave a comment