Hôm nay mình sẽ hướng dẫn bạn cách tìm URL trong chuỗi và tạo liên kết bằng JavaScript. Gần đây, mình đang phát triển một ứng dụng cho phép người dùng nhập vào nội dung và mình cần phát hiện URL từ chuỗi nội dung nhập vào này và tạo Liên kết HTML có thể nhấp. Dưới đây là cách mình đã làm với JavaScript.
Phát hiện URL từ chuỗi
Ở đây, chúng ta sẽ sử dụng phương thức đối sánh của chuỗi cùng với biểu thức chính quy để phát hiện các URL trong văn bản. Phương pháp này sẽ cung cấp cho chúng ta danh sách các URL trong mảng.
Ví dụ
function detectURLs(message) {
var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
return message.match(urlRegex)
}
detectURLs("Vui lòng ghé www.vzn.vn và đọc các bài viết hướng dẫn trên https://www.vzn.vn.")
// Kết quả: ["www.vzn.vn", "https://www.vzn.vn"]Thay thế một siêu liên kết thay vì các URL văn bản
Trong bước tiếp theo, chúng ta sẽ tạo một liên kết có thể nhấp thay vì các URL. Ở đây, chúng ta sẽ sử dụng phương thức thay thế của chuỗi và phương thức đó sẽ được sử dụng để tạo thẻ HTML a trong văn bản.
Ví dụ
function replaceURLs(message) {
if(!message) return;
var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
return message.replace(urlRegex, function (url) {
var hyperlink = url;
if (!hyperlink.match('^https?:\/\/')) {
hyperlink = 'http://' + hyperlink;
}
return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
});
}
replaceURLs("Vui lòng ghé www.vzn.vn và đọc các bài viết hướng dẫn trên https://www.vzn.vn.")Hy vọng với mã JavaScript này sẽ giúp được các bạn trong các dự án của mình.