[Blogger Thread Comments] Sử dụng Regex chuyển link ảnh/youtube thành tag HTML

Trong các ngôn ngữ lập trình nói chung và JavaScript nói riêng, việc xử lý chuỗi trong văn bản chưa bao giờ là điều dễ dàng. Lấy một ví dụ đơn giản : tìm trong văn bản chuỗi là liên kết hợp lệ, nó đã là một đề bài không dễ để hoàn thành ! Biểu thức chính quy - Regex (Regular Expressions) ra đời giúp lập trình viên phần nào ngủ ngon giấc. Trong nội dung bài viết này tôi sẽ hướng dẫn bạn cách sử dụng Regex chuyển link ảnh/youtube thành tag HTML, nói theo ngôn ngữ blogger đó là chèn ảnh và video vào khung bình luận

Xem demo
demo
Cách thức hoạt động đơn giản đó là kiểm tra trong nội dung bình luận chuỗi nào valid biểu thức regex thì thay thế nó thành tag HTLM (image/iframe)

Vậy như nào là valid

• Link ảnh: bắt đầu bằng http hoặc https và kết thúc bằng phần mở rộng (.png, .jpg, ...)
• Link video youtube: chính là địa chỉ url trên trình duyệt, ví dụ: https://www.youtube.com/watch?v=MhQKe-aERsU sẽ lấy id video để tạo code nhúng

Ok thủ thuật đơn giản thôi. Bạn chỉ cần đăng nhập vào trang quản trị blogger tìm đến thẻ <div class='comments-content'> và dán script vào SAU nó

<script type="text/javascript">
//<![CDATA[
// by Hung1001
const img = /\b(http(?:s)?:\/\/\S+(?:png|jpe?g|gif|bmp|svg|tif))\b/gi,
      ytb = /(http:|https:)?\/\/(www\.)?(youtube.com|youtu.be)\/(watch)?(\?v=)?(\S+)?/gi;
var cmts = document.getElementsByClassName("comment-content"); // important
for (var i = 0; i < cmts.length; i++) {
    var a = cmts[i].innerHTML;
    if (img.test(a)) {
        var c = a.match(img);
        for (var j = 0; j < c.length; j++) a = a.replace(c[j], "<img src='" + c[j] + "'/>");
    }
    if (ytb.test(a)) {
        var d = a.match(ytb);
        for (var k = 0; k < d.length; k++) {
            var id = d[k].split("=")[1];
            if (typeof id !== "undefined" && id.length === 11) {
                a = a.replace(d[k], "<div class='embed'><iframe src='https://www.youtube.com/embed/" + id + "' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen=''></iframe></div>");
            }

        }
    }
    cmts[i].innerHTML = a;
}
//]]>
</script>

Phần class comment-content lấy theo mẫu bình luận mặc định của blogger, nếu bạn tự triển khai hệ thống bình luận mới hãy thay chính xác tên class để code hoạt động

Ngoài ra để tạo iframe full width và responsive bạn thêm đoạn css sau

.comment-content .embed {
    position: relative;
    padding-bottom: 56.25%;
    max-width: 100%;
}

.comment-content .embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

Để tách img ra khỏi dòng thêm css sau

.comment-content img {
    margin: 15px auto; /* Can edit margin-top/bottom */
    display: block;
    width: 90%; /* Can edit */
}

Lưu mẫu lại và kiểm tra thành quả !

Ưu điểm: so với các chèn ảnh video dạng short code như [img]link ảnh[/img] thì giờ người dùng chỉ cần tìm link ảnh/video dán vào là xong, UX tăng đáng kể

Nhược điểm: đây chỉ là đoạn regex đơn giản tìm và thay thế tất cả link ảnh/video thành tag HTML, kể cả với cách chèn short code bạn cũng chưa thể kiểm soát được nó có tồn tại trên server không.

Ví dụ ông nào chơi khăm bình luận kiểu https://x69.com/abc.png hoặc https://www.youtube.com/watch?v=abcdefgh, theo lý thuyết đó vẫn là những liên kết valid regex nhưng chúng không tồn tại trên server thì nghiễm nhiên khi biến thành tag html sẽ cho ra kết quả không mong muốn. Gặp những ca này bạn nên bắt hắn dán lại link và xóa bình luận kia đi :v

Vậy nên từ đầu tôi đã nói xử lý chuỗi không đơn giản !

Bài viết này xin dừng tại đây, hi vọng bạn áp dụng thành công thủ thuật cho blog của mình

Good Luck !