Tự động phát hiện Images Url để hiển thị hình ảnh dưới thẻ <img>

Tự động nhận dạng địa chỉ hình ảnh (Image URL) sau đó hiển thị hình ảnh.

Regular Expression: Kiểm tra tính hợp lệ của địa chỉ hình ảnh

/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig

Đoạn javascript dưới đây sẽ tự động thay đổi tất cả các Image URL trong khối <div id="comment-holder"> và tự động chuyển sang thẻ hình ảnh <img> để hiển thị hình ảnh

Javascript:

var content = document.getElementById('comment-holder').innerHTML;
    content = content.replace(/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig, "<img src='$1' alt=''\/>");
document.getElementById('comment-holder').innerHTML = content;

Xem Demo

Tham khảo: Regex Replace URL with Links

Tự động chuyển đổi URL YouTube thành Embed Code sử dụng JQuery

Làm thế nào để tự động chuyển đổi URL YouTube sang mã nhúng (i frame embed code). Và đây là một ví dụ cơ bản sử dụng jQuery

Xem thêm: Hướng dẫn chèn Video Youtube vào khung Comment của Blogspot

jQuery:

$('#comment-holder').html(function(i, html) {
    var re  = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
        vid = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
    return html.replace(re, vid);
});

Xem Demo

Sử dụng được với 2 dạng URL YouTube như:
       http://youtu.be/EfdiHPeT2Sg
       http://www.youtube.com/watch?v=EfdiHPeT2Sg

Tham khảo: How to Convert a YouTube Video URL to the Iframe Embed Code, using JQuery