Dùng hàm replace

Dùng hàm replace trong javascript để lấy ảnh thumbnail chất lượng cho Blogger

7
Your ads here!

Có nhiều anh em hỏi vì sao các ảnh thumbnail của Blogger trong Blog Thiết Kế, vnblogspot lại sắc nét do có độ phân giải phù hợp như vậy. Cây trả lời là Hồng Hòa Vi đã dùng hàm “Replace” trong Javascript để lấy ảnh thumbnail có độ phân giải chất lượng hơn. Đây là một thủ thuật rất đơn giản. Tuy nhiên HHV muốn mở rộng thêm một chút cho những bạn mới chập chững tìm hiểu về Javasript.
Ai cũng biết các ảnh square thumbnail của do Blogger hoặc Picasa sinh ra mặc định có độ phân giải 72x72px tuy nhiên điều mọi người ít biết là còn có nhiều độ phân giải khác có chất lượng hơn. Hãy xem xét cấu trúc một link ảnh ở dưới đây và việc thay thế các thông số để có ảnh thumbnail với độ phân giải khác nhau.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQABC91xjR-iCcAgxs7Z8okWSlRE2NI14TgI7VwFn7iLNeTBpE2_JTuabvEKveJAOIjd3c-qjzkterjzl6ijGEm7qUy2fctM51Lnc_r_r8nENzHIC14-a5iek7x7BQkbfwKCnAk7da_M/xxxx-x/skull%25255B19%25255D.png

S72-C	S125-C	S300-C

Việc cần làm là tự động hóa quá trình thay thế thông số trong link này bằng một đoạn mã Javascript mà cụ thể là dùng một function có hàm replace.

HÀM REPLACE

Thực ra cú pháp của hàm Replace rất đơn giản

string.replace(regexp/substr,newstring)

Trong đó
regexp là chuỗi cần thay thế
newstring là đoạn chuỗi thay thế cho regexp.
substr

• Nếu không có substr thì hàm String.replace() của javascript chỉ replace lần xuất hiện đầu tiên mà thôi.
• Nếu thêm /g thì sẽ thay thế toàn bộ những chuỗi mà hàm replace phát hiện ra.
• Nếu /i thì sẽ không phân biệt hoa thường.

VD1

<script type='text/javascript'>var myString = ‘Blog Thiet Ke talks about Thiet Ke blog';alert(myString.replace('Thiet Ke', 'design')); //output : "Blog design talks about Thiet Ke blog" . Not "blog design talks about design blog".</script> 

VD2

<script type='text/javascript'>var myString = ‘Blog Thiet Ke talks about Thiet Ke blog';alert(myString.replace(/Thiet Ke/g, "design")); //output : "Blog design talks about design blog"</script>

VD3

<script type='text/javascript'>var myString = ‘Blog Thiet Ke talks about Thiet Ke blog';alert(myString.replace(/thiet ke/gi, "design")); //output : "Blog design talks about design blog"</script>

ỨNG DỤNG

Muốn có hình ảnh chất lượng hơn chỉ cần chèn đoạn code dưới dây vào ngay trên thẻ </body>

<script type='text/javascript'> //<![CDATA[ function replaceText(){ if(!document.getElementById){return;} bodyText = document.getElementById("blogthietke"); theText = bodyText.innerHTML; theText = theText.replace(/s72-c/gi, "s150-c"); bodyText.innerHTML = theText; } replaceText(); //]]> </script>

Cảm ơn Duy Phạm đã cung cấp đoạn code này
Bạn cần thay blogthietke bằng id của widget cần lấy thumbnail. Ngoài ra thay đổi S150-Cbằng các thông số khác. Cứ thử sai các số khác nhau xem thế nào nhé!

TÌM HIỂU

Mặc dù hàm replace rất đơn giản nhưng phải rắc rối như vậy là vì chúng ta chỉ muốn hàm replace có tác dụng trong một phạm vi giới hạn của của id. Vì vậy phải dùng thêm getElementById. Ngoài ra có thêm thuộc tính innerHTML để chúng ta chỉ dò phần text nằm giữa các thẻ HTML chứ không dò phần code HTML
Như vậy đoạn code trên có ý nghĩa như sau:
Dò xem có đúng id mà cần áp dụng hàm replace không, Nếu không đúng thì trả lại giá trị ngay (return). Nếu đúng id thì tìm toàn bộ text trong id đó (bodyText.innerHTML) thấy chỗ nào có s72 (không phần biệt hoa thường) thì cứ thay hết bằng s150. theText là một biến tạm.

KẾT LUẬN

Chỉ một đoạn code nhỏ khoảng mươi dòng nhưng nếu phân tích kỹ chúng ta có thể thấy rất nhiều điều hay ho… Chúng ta sẽ hiểu thêm một số thuộc tính và hàm của Javasript được liệt kê ở dưới đây.

• Hàm Replace
• Hàm getElementById
• Thuộc tính innerHTML

Nếu bạn thực sự hứng thú muốn tìm hiểu việc thiết kế web/blog thì nên tìm hiểu thêm bằng cách click vào đường link. Hy vọng sẽ giúp ích được cho mọi người!