Xin chào các bạn, hôm nay mình sẽ giới thiệu đến các bạn một cách để thêm attribute target="_blank" trong React. Trong quá trình làm việc với React, mình có sử dụng thuộc tính dangerouslySetInnerHTML để set một văn bản HTML vào DOM.

Trong đoạn HTML đó có chứa các thẻ chưa set thuộc tính target="_blank". Vậy làm cách nào để set thuộc tính này vào tất cả các thẻ ? các bạn theo dõi tiếp nhé 😁

Giải pháp

Giả sử mình có một đoạn HTML và dùng thuộc tính dangerouslySetInnerHTML để set trực tiếp đoạn HTML này vào DOM.

import React from "react";

export default function Test() {
    const HTML =
        '
Header
My website!Footer!My facebook!';

    return 
;
}

Kết quả sau khi render:

  
Header
  My website!            
  Footer!
    My facebook!
  

Mình tạo một đoạn string HTML và pass vào dangerouslySetInnerHTML một object với key là __html.

Trong biến HTML mình có tạo 2 thẻ và không set thuộc tính target="_blank". Trong một vài trường hợp mà bạn nhận được một đoạn HTML bất kì và muốn tất cả các thẻ có thuộc tính target="_blank" (bạn nào dùng gatsby và markdown syntax sẽ rõ 😁).

Cách làm của mình như sau:

Mình sẽ tìm kiếm tất cả cả thẻ bằng cách dùng regular expressions (regex). tìm hiểu regex tại đây

Sau đó trong dangerouslySetInnerHTML mình dùng

  
Header
  My website!            
  Footer!
    My facebook!
  

6 method và truyền cho đối số thứ nhất là một biểu thức chính quy (biến links ), đối số thứ hai là giá trị muốn thay thế.

cont replace = `target="_blank" href`

dangerouslySetInnerHTML={{
  __html: HTML.replace(links,replace)
}}  

  
Header
  My website!            
  Footer!
    My facebook!
  

6 method sẽ return về một chuỗi mới với giá trị bạn muốn thay thế.

Và đây là kết quả 😅

  
Header
  My website!            
  Footer!
    My facebook!
  

Kết Luận

Cuối cùng thì mình đã hướng dẫn xong cho các bạn cách để thêm thuộc tính target="_blank" khi dùng dangerouslySetInnerHTML trong React.

Lưu ý: việc sử dụng dangerouslySetInnerHTML một cách bất cẩn sẽ tạo ra các lỗ hổng XSS trong ứng dụng của bạn. Giải pháp ở đây là các bạn tìm hiểu về DOMPurify để giải quyết vấn đề trên nhé.

- Ngoài ra, thuộc tính href cũng có thể dùng để xác định một vị trí bên trong trang web mà bạn muốn di chuyển tới (vị trí của phần tử được xác định dựa giá trị thuộc tính id của phần tử)

---

    


    Di chuyển đến phần tử có thuộc tính id với giá trị là "css"
    
1) Tài liệu học HTML
    ...
    
2) Tài liệu học CSS
    ...
    
3) Tài liệu học JavaScript
    ...

Xem ví dụ

2.2) Thuộc tính download

- Thuộc tính download xác định việc khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về.

---

    Click here

Xem ví dụ

- Ta có thể thêm giá trị cho thuộc tính download để xác định tên của tập tin khi được lưu về máy tính.

Link HTML là hyperlink, điều này có nghĩa rằng người dùng có thể click (hoặc tab nếu trên thiết bị điện thoại) lên liên kết để đi tới trang đích.

Lưu ý: Trong ngữ cảnh web, thuật ngữ link HTML còn được gọi vắn tắt là link. Tuy nhiên thuật ngữ link không phải lúc nào cũng là một liên kết HTML.

Cú Pháp Link HTML

Trong HTML để tạo link chúng ta sử dụng thẻ :

link_text

Trong đó:

• CodeHub.vn

  2 là URL trang đích.

• CodeHub.vn

  3 là tiêu đề của liên kết, mô tả ngắn gọn về nội dung trang đích.

• CodeHub.vn

  4 là chữ hiển thị liên kết để người dùng có thể click vào.

Ví dụ:

CodeHub.vn

Chạy Thử

Một ví dụ khác:

Học HTML trên CodeHub.vn đây

Chạy Thử

Link HTML Local

Cú pháp của link HTML mà chúng ta tham khảo ở trên đây sử dụng địa chỉ đường dẫn tuyệt đối cho thuộc tính

CodeHub.vn

5 bao gồm cả giao thức

CodeHub.vn

6, tên miền phụ

CodeHub.vn

7 và tên miền

CodeHub.vn

8:

https://www.codehub.vn/Hoc-HTML

Trường hợp đường dẫn của trang đích trong link HTML ở trên cùng một website với trang web hiện tại thì chúng ta có thể sử dụng địa chỉ tương đối.

Nếu như trang web hiện tại thuộc website codehub.vn thì khi tạo một link HTML với địa chỉ URL cũng thuộc website này thì chúng ta có thể viết như sau:

Học HTML 

Chạy Thử

Link như trên được gọi là link local hay liên kết nội bộ trong cùng một website.

Thuộc Tính CodeHub.vn9

Thuộc tính

CodeHub.vn

9 được dùng để xác định địa chỉ trang đích của liên kết. Trình duyệt sẽ mở trang này khi người dùng click (hoặc tab) lên liên kết.

Thuộc tính

CodeHub.vn

9 có thể nhận một trong các giá trị sau:

• Học HTML trên CodeHub.vn đây

  2: Với giá trị này thì trình duyệt sẽ mở trang đích ở một cửa sổ hoặc tab mới.

• Học HTML trên CodeHub.vn đây

  3: Với giá trị này thì trình duyệt sẽ mở trang đích ở cửa sổ hoặc tab hiện tại (đây là giá trị mặc định).

• Học HTML trên CodeHub.vn đây

  4: Với giá trị này thì trình duyệt sẽ mở trang đích thay thế frame cha (xem ví dụ dưới).

• Học HTML trên CodeHub.vn đây

  5: Với giá trị này thì trình duyệt sẽ mở trang đích trên toàn bộ màn hình (xem ví dụ dưới).

• Học HTML trên CodeHub.vn đây

  6: Với giá trị này thì trình duyệt sẽ mở trang đích ở frame với tên cho trước.

HTML Link: Học HTML trên CodeHub.vn đây7

Để mở link trong một tab mới chúng ta sử dụng

Học HTML trên CodeHub.vn đây

7.

Ví dụ:

Truy cập trang chủ CodeHub.vn!

Chạy Thử

HTML Link: Học HTML trên CodeHub.vn đây9

Nếu trang hiện tại được hiển thị trong một frame và bạn muốn trang đích sẽ thay thế frame hiện tại khi người dùng click vào:

Ví dụ:

Học HTML

Chạy Thử

HTML Link: https://www.codehub.vn/Hoc-HTML0

Nếu trang hiện tại được hiển thị trong một frame và bạn muốn trang đích sẽ hiển thị toàn bộ màn hình thay thế trang web cha chứa frame có link liên kết:

Học HTML

Chạy Thử

Thuộc Tính https://www.codehub.vn/Hoc-HTML1

Thuộc tính

https://www.codehub.vn/Hoc-HTML

1 dùng để mô tả tóm tắt nội dung của liên kết HTML.

Học HTML

Chạy Thử

Khi bạn rê chuột lên phía trên liên kết HTML và đợi vài giây thì trình duyệt sẽ hiển thị một tooltip nhỏ với nội dung là giá trị của thuộc tính

https://www.codehub.vn/Hoc-HTML

1.

Link Hình Ảnh

Để tạo một link hình ảnh chúng ta sẽ thay thế

CodeHub.vn

4 bằng một phần tử

https://www.codehub.vn/Hoc-HTML

5:

Chạy Thử

Link Bookmark

Để link tới một phần tử trên trang với giá trị cho trước của thuộc tính

https://www.codehub.vn/Hoc-HTML

6, chúng ta sử dụng link bookmark. Lúc này đích đến chính là phần tử với thuộc tính

https://www.codehub.vn/Hoc-HTML

6 cho trước nằm trên cùng một trang với trang hiện tại.