Tìm url trong văn bản tạo liên kết javascript
Thuộc tính quan trọng nhất của phần tử 5 là thuộc tính 6, cho biết đích của liên kết Show
Văn bản liên kết là phần sẽ hiển thị cho người đọc Nhấp vào văn bản liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định Ví dụVí dụ này cho thấy cách tạo liên kết đến W3Schools. com Truy cập W3Schools. com Tự mình thử »Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt
Mẹo. Tất nhiên, các liên kết có thể được tạo kiểu bằng CSS, để có giao diện khác Liên kết HTML - Thuộc tính đíchTheo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết Thuộc tính 7 chỉ định nơi mở tài liệu được liên kếtThuộc tính 7 có thể có một trong các giá trị sau
Ví dụSử dụng target="_blank" để mở tài liệu được liên kết trong cửa sổ hoặc tab trình duyệt mới Truy cập W3Schools Tự mình thử »URL tuyệt đối so với. URL tương đốiCả hai ví dụ trên đều sử dụng URL tuyệt đối (địa chỉ web đầy đủ) trong thuộc tính 6Liên kết cục bộ (liên kết đến một trang trong cùng một trang web) được chỉ định bằng một URL tương đối (không có "https. // phần www") Ví dụURL tuyệt đốiW3C URL tương đốiHình ảnh HTML Hướng dẫn CSS Tự mình thử »Liên kết HTML - Sử dụng hình ảnh làm liên kếtĐể sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ 50 bên trong thẻ 5Ví dụTự mình thử » Liên kết đến một địa chỉ emailSử dụng 52 bên trong thuộc tính 6 để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới)Nút dưới dạng Liên kếtĐể sử dụng nút HTML làm liên kết, bạn phải thêm một số mã JavaScript JavaScript cho phép bạn chỉ định điều gì xảy ra tại một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút Ví dụHướng dẫn HTML Tự mình thử »Tiêu đề liên kếtThuộc tính 54 chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua phần tử Nhận toàn quyền truy cập vào Sách dạy nấu ăn biểu thức chính quy, Ấn bản thứ 2 và hơn 60 nghìn đầu sách khác, với bản dùng thử miễn phí 10 ngày của O'Reilly Ngoài ra còn có các sự kiện trực tuyến trực tiếp, nội dung tương tác, tài liệu chuẩn bị chứng nhận, v.v. Các siêu liên kết thực sự quan trọng — chúng là thứ làm cho Web trở thành một trang web. Bài viết này trình bày cú pháp cần thiết để tạo liên kết và thảo luận về các phương pháp hay nhất về liên kết điều kiện tiên quyết. Làm quen với HTML cơ bản, như được trình bày trong Bắt đầu với HTML. Định dạng văn bản HTML, như được trình bày trong Nguyên tắc cơ bản về văn bản HTML. Khách quan. Để tìm hiểu cách triển khai siêu kết nối một cách hiệu quả và liên kết nhiều tệp với nhauSiêu liên kết là một trong những đổi mới thú vị nhất mà Web cung cấp. Chúng đã là một tính năng của Web ngay từ đầu và là thứ làm cho Web trở thành một trang web. Siêu liên kết cho phép chúng tôi liên kết tài liệu với các tài liệu hoặc tài nguyên khác, liên kết đến các phần cụ thể của tài liệu hoặc cung cấp ứng dụng tại một địa chỉ web. Hầu hết mọi nội dung web đều có thể được chuyển đổi thành một liên kết để khi được nhấp hoặc kích hoạt, trình duyệt web sẽ chuyển đến một địa chỉ web (URL) khác Ghi chú. Một URL có thể trỏ tới các tệp HTML, tệp văn bản, hình ảnh, tài liệu văn bản, tệp video và âm thanh hoặc bất kỳ thứ gì khác tồn tại trên Web. Nếu trình duyệt web không biết cách hiển thị hoặc xử lý tệp, nó sẽ hỏi bạn có muốn mở tệp không (trong trường hợp đó, nhiệm vụ mở hoặc xử lý tệp được chuyển cho một ứng dụng gốc phù hợp trên thiết bị) Ví dụ: trang chủ của BBC chứa nhiều liên kết trỏ đến không chỉ nhiều câu chuyện tin tức mà còn cả các khu vực khác nhau của trang web (chức năng điều hướng), trang đăng nhập/đăng ký (công cụ người dùng), v.v. Liên kết cơ bản được tạo bằng cách gói văn bản hoặc nội dung khác, xem , bên trong phần tử 5 và sử dụng thuộc tính, còn được gọi là Tham chiếu siêu văn bản hoặc đích, chứa địa chỉ web
Điều này cho chúng ta kết quả sau Tôi đang tạo một liên kết đến trang chủ Mozilla Một thuộc tính khác mà bạn có thể muốn thêm vào các liên kết của mình là 7. Tiêu đề chứa thông tin bổ sung về liên kết, chẳng hạn như loại thông tin mà trang chứa hoặc những điều cần lưu ý trên trang web
Điều này mang lại cho chúng tôi kết quả sau và di chuột qua liên kết sẽ hiển thị tiêu đề dưới dạng chú giải công cụ Tôi đang tạo một liên kết đến trang chủ Mozilla Ghi chú. Tiêu đề liên kết chỉ được hiển thị khi di chuột, điều đó có nghĩa là những người dựa vào điều khiển bàn phím hoặc màn hình cảm ứng để điều hướng các trang web sẽ gặp khó khăn khi truy cập thông tin tiêu đề. Nếu thông tin của tiêu đề thực sự quan trọng đối với khả năng sử dụng của trang thì bạn nên trình bày nó theo cách mà tất cả người dùng đều có thể truy cập được, chẳng hạn bằng cách đặt nó trong văn bản thông thường Tạo tài liệu HTML bằng trình chỉnh sửa mã cục bộ của bạn và mẫu bắt đầu của chúng tôi
Như đã đề cập trước đây, hầu hết mọi nội dung đều có thể được tạo thành một liên kết, thậm chí. Nếu bạn có một hình ảnh muốn tạo thành một liên kết, hãy sử dụng phần tử 5 và tham chiếu tệp hình ảnh với phần tử 9
Ghi chú. Bạn sẽ tìm hiểu thêm về cách sử dụng hình ảnh trên Web trong một bài viết sau Để hiểu đầy đủ các mục tiêu liên kết, bạn cần hiểu URL và đường dẫn tệp. Phần này cung cấp cho bạn thông tin bạn cần để đạt được điều này URL hoặc Bộ định vị tài nguyên thống nhất là một chuỗi văn bản xác định vị trí của một thứ gì đó trên Web. Ví dụ: trang chủ tiếng Anh của Mozilla được đặt tại 0URL sử dụng đường dẫn để tìm tệp. Đường dẫn chỉ định vị trí của tệp bạn quan tâm trong hệ thống tệp. Hãy xem một ví dụ về cấu trúc thư mục, xem thư mục tạo siêu liên kết Thư mục gốc của cấu trúc thư mục này được gọi là 1. Khi làm việc cục bộ với một trang web, bạn sẽ có một thư mục chứa toàn bộ trang web. Bên trong thư mục gốc, chúng tôi có một tệp 2 và một tệp 3. Trong một trang web thực, 2 sẽ là trang chủ hoặc trang đích của chúng tôi (một trang web đóng vai trò là điểm vào cho một trang web hoặc một phần cụ thể của trang web. )Ngoài ra còn có hai thư mục bên trong thư mục gốc của chúng tôi - 5 và 6. Mỗi cái này có một tệp duy nhất bên trong chúng — tệp PDF ( 7) và tệp 2, tương ứng. Lưu ý rằng bạn có thể có hai tệp 2 trong một dự án, miễn là chúng ở các vị trí hệ thống tệp khác nhau. 2 thứ hai có lẽ sẽ là trang đích chính cho thông tin liên quan đến dự án
Ghi chú. Ví dụ: bạn có thể kết hợp nhiều phiên bản của các tính năng này thành các URL phức tạp. 85Có thể liên kết đến một phần cụ thể của tài liệu HTML, được gọi là đoạn tài liệu, thay vì chỉ đến đầu tài liệu. Để làm điều này, trước tiên bạn phải gán một thuộc tính cho phần tử mà bạn muốn liên kết đến. Nó thường hợp lý để liên kết đến một tiêu đề cụ thể, vì vậy tiêu đề này sẽ trông giống như sau 6Sau đó, để liên kết đến 86 cụ thể đó, bạn sẽ đưa nó vào cuối URL, trước ký hiệu thăng/pound ( 88), chẳng hạn 9Bạn thậm chí có thể tự mình sử dụng tham chiếu đoạn tài liệu để liên kết đến một phần khác của tài liệu hiện tại 0Hai thuật ngữ bạn sẽ bắt gặp trên Web là URL tuyệt đối và URL tương đối URL tuyệt đối. Trỏ tới một vị trí được xác định bởi vị trí tuyệt đối của nó trên web, bao gồm cả giao thức và tên miền. Ví dụ: nếu một trang 2 được tải lên một thư mục có tên là 6 nằm bên trong thư mục gốc của máy chủ web và miền của trang web là 41, thì trang đó sẽ có sẵn tại 42 (hoặc thậm chí chỉ là 43, vì hầu hết các máy chủ web chỉ xem . )Một URL tuyệt đối sẽ luôn trỏ đến cùng một vị trí, bất kể nó được sử dụng ở đâu URL tương đối. Trỏ tới một vị trí có liên quan đến tệp mà bạn đang liên kết từ đó, giống như những gì chúng ta đã xem xét trong phần trước. Ví dụ: nếu chúng tôi muốn liên kết từ tệp ví dụ của chúng tôi tại 42 đến tệp PDF trong cùng thư mục, thì URL sẽ chỉ là tên tệp — 7 — không cần thêm thông tin. Nếu PDF có sẵn trong thư mục con bên trong 6 được gọi là 5, thì liên kết tương đối sẽ là 81 (URL tuyệt đối tương đương sẽ là 60. )Một URL tương đối sẽ trỏ đến các vị trí khác nhau tùy thuộc vào vị trí thực tế của tệp mà bạn tham chiếu từ đó — ví dụ: nếu chúng tôi đã chuyển tệp 2 của mình ra khỏi thư mục 6 và vào thư mục gốc của trang web (cấp cao nhất, không có trong bất kỳ thư mục nào) Tất nhiên, vị trí của tệp 7 và thư mục 5 sẽ không thay đổi đột ngột vì bạn đã di chuyển tệp 2 — điều này sẽ khiến liên kết của bạn trỏ đến sai vị trí, vì vậy nó sẽ không hoạt động nếu bạn nhấp vào. bạn cần cẩn thậnCó một số thực hành tốt nhất để làm theo khi viết liên kết. Bây giờ chúng ta hãy nhìn vào những điều này Thật dễ dàng để ném các liên kết lên trang của bạn. Như thế là không đủ. Chúng tôi cần làm cho tất cả người đọc có thể truy cập các liên kết của mình, bất kể bối cảnh hiện tại của họ là gì và họ thích công cụ nào hơn. Ví dụ
Hãy xem xét một ví dụ cụ thể Văn bản liên kết tốt. Tải xuống Firefox 1Văn bản liên kết xấu. Nhấn vào đây để tải Firefox 0mẹo khác
Khi liên kết đến một tài nguyên sẽ được tải xuống (chẳng hạn như tài liệu PDF hoặc Word), được phát trực tuyến (như video hoặc âm thanh) hoặc có tác dụng không mong muốn khác (mở cửa sổ bật lên), bạn nên thêm từ ngữ rõ ràng để giảm bớt sự nhầm lẫn Ví dụ
Hãy xem xét một số ví dụ, để xem loại văn bản nào có thể được sử dụng ở đây 1Khi bạn đang liên kết tới một tài nguyên sẽ được tải xuống thay vì mở trong trình duyệt, bạn có thể sử dụng thuộc tính 69 để cung cấp tên tệp lưu mặc định. Đây là một ví dụ với liên kết tải xuống phiên bản Windows mới nhất của Firefox 2Đối với bài tập này, chúng tôi muốn bạn liên kết một số trang với một menu điều hướng để tạo một trang web nhiều trang. Đây là một cách phổ biến để tạo một trang web — cùng một cấu trúc trang được sử dụng trên mọi trang, bao gồm cùng một menu điều hướng, do đó, khi các liên kết được nhấp vào, nó sẽ tạo ấn tượng rằng bạn đang ở cùng một nơi và nội dung khác là Bạn sẽ cần tạo các bản sao cục bộ của bốn trang sau, tất cả trong cùng một thư mục. Để có danh sách tệp đầy đủ, hãy xem thư mục menu-menu-bắt đầu
Bạn nên
Ví dụ hoàn thành sẽ trông giống như trang sau Ghi chú. Nếu bạn gặp khó khăn hoặc không chắc mình đã hiểu đúng hay chưa, bạn có thể kiểm tra thư mục navigation-menu-marked-up để xem câu trả lời chính xác Có thể tạo các liên kết hoặc nút mà khi được nhấp vào sẽ mở một email gửi đi mới thay vì liên kết đến một tài nguyên hoặc trang. Điều này được thực hiện bằng cách sử dụng phần tử 5 và lược đồ URL 91Ở dạng cơ bản nhất và thường được sử dụng, liên kết 91 cho biết địa chỉ email của người nhận dự định. Ví dụ 3Điều này dẫn đến một liên kết trông như thế này. Gửi email đến hư không Trên thực tế, địa chỉ email là tùy chọn. Nếu bạn bỏ qua nó và của bạn là "mailto. ", một cửa sổ email gửi đi mới sẽ được mở bởi ứng dụng email của người dùng mà không có địa chỉ đích. Điều này thường hữu ích vì liên kết "Chia sẻ" mà người dùng có thể nhấp để gửi email đến địa chỉ họ chọn Ngoài địa chỉ email, bạn có thể cung cấp các thông tin khác. Trên thực tế, bất kỳ trường tiêu đề thư tiêu chuẩn nào cũng có thể được thêm vào URL 94 mà bạn cung cấp. Những từ được sử dụng phổ biến nhất trong số này là "subject", "cc" và "body" (không phải là trường tiêu đề thực, nhưng cho phép bạn chỉ định một thông báo nội dung ngắn cho email mới). Mỗi trường và giá trị của nó được chỉ định làm cụm từ truy vấnĐây là một ví dụ bao gồm cc, bcc, chủ đề và nội dung 4Ghi chú. Các giá trị của từng trường phải được mã hóa URL bằng các ký tự không in được (các ký tự vô hình như tab, dấu xuống dòng và dấu ngắt trang) và phần trăm thoát dấu cách. Ngoài ra, hãy lưu ý việc sử dụng dấu chấm hỏi ( 95) để phân tách URL chính khỏi các giá trị trường và dấu và (&) để phân tách từng trường trong URL 91. Đây là ký hiệu truy vấn URL tiêu chuẩn. Đọc để hiểu ký hiệu truy vấn URL nào được sử dụng phổ biến hơn choDưới đây là một số URL 94 mẫu khác
Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . liên kết Đó là cho các liên kết, bây giờ dù sao đi nữa. Bạn sẽ quay lại các liên kết sau này trong khóa học khi bạn bắt đầu xem xét cách tạo kiểu cho chúng. Tiếp theo đối với HTML, chúng ta sẽ quay lại ngữ nghĩa văn bản và xem xét một số tính năng nâng cao/bất thường hơn mà bạn sẽ thấy hữu ích — Định dạng văn bản nâng cao là điểm dừng tiếp theo của bạn Làm cách nào để tìm và thay thế URL văn bản bằng JavaScript liên kết?RegExp – Tìm URL trong văn bản được cung cấp và cũng tìm tên miền của URL. Sau khi nhận được URL ở dạng văn bản, nó sẽ thay thế nó bằng phần tử . Nó cũng thay thế văn bản liên kết theo tên miền.
Làm cách nào để phát hiện và nhận URL trên chuỗi JavaScript?Trả lời. Sử dụng cửa sổ. vị trí. href Thuộc tính vị trí. href để lấy toàn bộ URL của trang hiện tại bao gồm tên máy chủ, chuỗi truy vấn, mã định danh phân đoạn, v.v.
Làm cách nào để chuyển đổi văn bản URL thành siêu liên kết có thể nhấp trong JavaScript?Hàm JavaScript
. Đầu tiên, nó sẽ tìm các liên kết bắt đầu bằng http/https/ftp/file và thay thế chúng bằng các văn bản siêu liên kết. Tiếp theo, nó tìm kiếm các url bắt đầu bằng www và thay thế các url đó bằng các liên kết có thể nhấp được. The function toHyperlink() will do a two-step pattern match. First it will find the links starting with http / https / ftp / file and replace those with hyperlinked texts. Next it looks for urls that start with www and replace those with clickable links.
Làm cách nào để lấy văn bản liên kết trong JavaScript?Sử dụng thuộc tính textContent để lấy văn bản của phần tử liên kết , e. g. const văn bản = liên kết. văn bảnnội dung. Thuộc tính textContent sẽ trả về nội dung văn bản của phần tử |