CODEWITHSUNDEEP
javascriptjquery
user1261800
user1261800

Reputation:

Grabing value from input field and extracting ID

I am currently working with extracting YT video IDs with the use of regex through javascript. I have a working example. But instead of using var exaxmpleYoutubeURLs. Is there a way to create an input field where the link can be copied into and then displayed the eleven digit ID through ajax? Here is my JSFIDDLE

var youtubePattern = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/ytscreeningroom\?v=|\/feeds\/api\/videos\/|\/user\S*[^\w\-\s]|\S*[^\w\-\s]))([\w\-]{11})[?=&+%\w-]*/ig;

var exmpleYouTubeURLs = [
    "http://www.youtube.com/embed/NLqAF9hrVbY",
];

// Extract the YouTube ID 
function linkifyYouTubeURLs(text) {
    return text.replace(youtubePattern, '$1');
}

for(i=0; i < exmpleYouTubeURLs.length; i++) {
    document.writeln(i + ". " + linkifyYouTubeURLs(exmpleYouTubeURLs[i]) + "<br>");
}

Upvotes: 0

Views: 125

Answers (1)

Salman
Salman

Reputation: 9447

Do you want this?

<textarea id="links"></textarea>
<input type="button" onclick="extractLinks()" value="Extract" />
<div id="outputDiv"></div>

<script>
    function extractLinks() {

        var youtubePattern = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/ytscreeningroom\?v=|\/feeds\/api\/videos\/|\/user\S*[^\w\-\s]|\S*[^\w\-\s]))([\w\-]{11})[?=&+%\w-]*/ig;

        var exmpleYouTubeURLs = document.getElementById('links').value.split('\n');
        var output = document.getElementById('outputDiv');

        function linkifyYouTubeURLs(text) {
            return text.replace(youtubePattern, '$1');
        }

        output.innerHTML = '';
        for(i=0; i < exmpleYouTubeURLs.length; i++) {
             output.innerHTML += i + ". " + linkifyYouTubeURLs(exmpleYouTubeURLs[i]) + "<br >";
        }
    }
</script>

Upvotes: 1

Related Questions