Highlight Link trong String với React

Highlight link trong string là một nhu cầu phổ biến khi bạn muốn hiển thị văn bản thô chứa URL và biến chúng thành liên kết có thể nhấp được. Trong React, bạn có thể dễ dàng thực hiện điều này với một số kỹ thuật đơn giản và hiệu quả.

Sử dụng Regular Expression để Tìm và Thay thế

Một cách tiếp cận phổ biến là sử dụng Regular Expression (RegEx) để tìm tất cả các URL trong string và thay thế chúng bằng các thẻ <a> của HTML.

function HighlightLinks(props) {
  const regex = /((http|https)://[^s]+)/g;
  const parts = props.text.split(regex);

  return (
    <span>
      {parts.map((part, index) => {
        return (
          <React.Fragment key={index}>
            {part.match(regex) ? (
              <a href={part} target="_blank" rel="noopener noreferrer">
                {part}
              </a>
            ) : (
              part
            )}
          </React.Fragment>
        );
      })}
    </span>
  );
}

const text =
  "Hãy truy cập website của chúng tôi tại https://example.com để biết thêm thông tin.";

ReactDOM.render(
  <HighlightLinks text={text} />,
  document.getElementById("root")
);

Trong ví dụ này, chúng ta sử dụng split để chia string thành một mảng dựa trên RegEx. Sau đó, chúng ta lặp qua mảng và kiểm tra xem mỗi phần tử có phải là một URL hợp lệ hay không. Nếu có, chúng ta bọc nó trong thẻ <a>, ngược lại, hiển thị phần tử như văn bản thông thường.

Sử dụng Thư viện npm

Ngoài ra, bạn có thể sử dụng các thư viện npm được xây dựng sẵn để đơn giản hóa quá trình này. Một thư viện phổ biến là react-linkify.

npm install react-linkify

Sau khi cài đặt, bạn có thể sử dụng nó như sau:

import Linkify from "react-linkify";

function MyComponent() {
  const text = "Visit our website at https://example.com for more information.";

  return <Linkify>{text}</Linkify>;
}

Thư viện react-linkify sẽ tự động phát hiện và chuyển đổi các URL trong string thành liên kết có thể nhấp được.

Tùy chỉnh Kiểu dáng cho Liên kết

Bạn có thể dễ dàng tùy chỉnh kiểu dáng cho các liên kết được tạo ra bằng cách sử dụng CSS thông thường.

a {
  color: blue;
  text-decoration: underline;
}

a:hover {
  color: purple;
}

Xử lý Sự kiện Click cho Liên kết

Trong một số trường hợp, bạn có thể muốn xử lý sự kiện click cho các liên kết được tạo ra. Bạn có thể làm điều này bằng cách truyền một hàm xử lý sự kiện onClick cho thẻ <a>.

function handleClick(event) {
  event.preventDefault();
  // Xử lý sự kiện click tại đây
}

function HighlightLinks(props) {
  // ... (giống như ví dụ trước)
  return (
    <span>
      {parts.map((part, index) => {
        return (
          <React.Fragment key={index}>
            {part.match(regex) ? (
              <a
                href={part}
                target="_blank"
                rel="noopener noreferrer"
                onClick={handleClick}
              >
                {part}
              </a>
            ) : (
              part
            )}
          </React.Fragment>
        );
      })}
    </span>
  );
}

Bằng cách sử dụng event.preventDefault(), bạn có thể ngăn chặn hành vi mặc định của trình duyệt là chuyển hướng đến URL khi người dùng nhấp vào liên kết.

Kết luận

Highlight link trong string là một tác vụ phổ biến trong React. Bạn có thể sử dụng RegEx hoặc thư viện react-linkify để thực hiện điều này một cách dễ dàng. Ngoài ra, bạn có thể tùy chỉnh kiểu dáng và xử lý sự kiện click cho các liên kết được tạo ra.