JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="url">http://www.youtube.com/watch?v=OnoUrrue3lE <strong>ID:</strong> </div>
<div id="url-short">http://youtu.be/OnoUrrue3lE <strong>ID:</strong></div>

CSS

div {margin: 2em; }

strong {
    font-weight: bold;
    padding: 0 0.4em;
}

span {
    color: green;
    font-family: sans-serif;
}

JavaScript

function getYouTubeVideoID(url) {

    var id = '';

    if (url.indexOf('http://youtu.be/') != -1) {
        id = url.replace('http://youtu.be/', '');
    } else {
        var needle = url.indexOf('v=');
        id = url.substring(needle + 2, url.length);

    }

    return id;

}

var url = document.getElementById('url');
var text1 = url.childNodes[0].nodeValue;

var urlShort = document.getElementById('url-short');
var text2 = urlShort.childNodes[0].nodeValue;


var node1 = document.createElement('span');
node1.appendChild(document.createTextNode(getYouTubeVideoID(text1)));

var node2 = document.createElement('span');
node2.appendChild(document.createTextNode(getYouTubeVideoID(text2)));

url.appendChild(node1);
urlShort.appendChild(node2);