Mã hóa html AngularJS

Ví dụ URL mã hóa AngularJs. Chúng ta có thể sử dụng hàm có sẵn javascript encodeURIComponent(string), encodeURI(string) hoặc escape(string) để mã hóa chuỗi url. Ở đây trong hướng dẫn này, chúng tôi sẽ giải thích cách bạn có thể mã hóa chuỗi url bằng ví dụ và bản trình diễn trực tuyến

---

Tham số URL mã hóa AngularJs. Chuỗi. JavaScript. Thí dụ

Hãy để chúng tôi tạo một ví dụ đơn giản để sử dụng hàm encodeURIComponent(string) để mã hóa các tham số url

Bạn muốn hiển thị một số dữ liệu do người dùng cung cấp cho trang, nhưng vì bất kỳ lý do gì, bạn không thể sử dụng {{ curly brace syntax }} của Angular?

Có thể suy nghĩ đầu tiên của bạn là trộn nó với một chuỗi, như thế này

var content = "" + userContent + "";
element.text(content);

Nhưng hãy cẩn thận. Loại điều này có thể mở ra cho bạn các cuộc tấn công XSS và những thứ khó chịu khác

Bạn cần thoát hoặc làm sạch dữ liệu đó trước khi đặt nó trên trang

vệ sinh

Angular tự động vệ sinh dữ liệu nếu bạn sử dụng chỉ thị ng-bind-html. Điều này có nghĩa là nó loại bỏ hoàn toàn HTML

Một chuỗi Hello World! trở thành

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

0

Vệ sinh thủ công

Nếu bạn muốn làm sạch dữ liệu mà không cần sử dụng ng-bind-html, bạn có thể sử dụng dịch vụ

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

2. Cài đặt nó và yêu cầu mô-đun làm phụ thuộc

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

3

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

0

Sau đó, chỉ cần tiêm nó vào nơi cần thiết, và sử dụng nó

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

Tẩu thoát

Angular tự động thoát dữ liệu nếu bạn sử dụng

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

1 hoặc {{ curly brace syntax }}. Điều này có nghĩa là nó xuất ra các ký tự bằng chữ thay vì diễn giải chúng dưới dạng HTML

Dữ liệu trông giống như Hello World! sẽ hiển thị dưới dạng Hello World! (không phải Hello World)

Thoát thủ công

Góc dường như không hiển thị dịch vụ tích hợp để thoát. Tuy nhiên Lodash (v3) có chức năng

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

5 thực hiện chính xác điều này

Cài đặt Lodash nếu bạn chưa sử dụng nó.

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "" + $sanitize(str) + "";
    }
  };
}

6

Sau đó thoát khỏi chuỗi của bạn khi cần thiết

function yourThing() {
  return {
    function getContent(str) {
      return "" + _.escape(str) + "";
    }
  };
}

Và với điều đó, bạn và người dùng của bạn an toàn cho một ngày khác

Nếu bạn muốn các bài đăng được lên lịch thường xuyên của tôi về các phương pháp hay nhất về Angular, cũng như thế giới hoàn toàn mới của Angular 2, hãy đăng ký nhận bản tin của tôi bên dưới

Cảm ơn vì đã đọc

Sự thành công. bây giờ hãy kiếm tra thư điện tử của bạn

Tìm hiểu kiến ​​thức cơ bản về React trong 5 ngày

Cuối cùng cũng hiểu cách React hoạt động. Bạn sẽ

🎉 Nhận một cái gì đó trên màn hình

💄 Viết các thành phần động

🏃 Làm cho nó tương tác

😎 Tìm nạp dữ liệu thực

🛳 Đặt nó trực tuyến

5 ngày, 5 email. Đi bộ với những điều cơ bản và một kế hoạch

Nhận bài học 1 ngay bây giờ 👇

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại

Địa chỉ email

Gửi Cho Tôi Bài Học 1

Tôi tôn trọng sự riêng tư email của bạn. Hủy đăng ký bất cứ lúc nào

Trước khi chúng ta tiếp tục, tôi phải hỏi

đồng ý

Đã xảy ra lỗi khi gửi đăng ký của bạn. Vui lòng thử lại

Finish

Học React có thể là một cuộc đấu tranh — rất nhiều thư viện và công cụ.
Lời khuyên của tôi? . )
Để biết cách tiếp cận từng bước, hãy xem hội thảo Pure React của tôi.

Học cách suy nghĩ trong React

• Hơn 90 bài học về màn hình
• Bảng điểm đầy đủ và phụ đề chi tiết
• Tất cả các mã từ các bài học
• phỏng vấn nhà phát triển

Bắt đầu học Pure React ngay bây giờ

Dave Ceddia's Pure React là một tác phẩm có chiều sâu và sự rõ ràng to lớn. đội nón ra đi. Tôi là một huấn luyện viên React ở London và sẽ giới thiệu kỹ lưỡng điều này cho tất cả các nhà phát triển giao diện người dùng muốn nâng cao kỹ năng hoặc củng cố

Làm cách nào để mã hóa URL trong AngularJs?

Làm cách nào để thoát các thẻ HTML trong AngularJs?

Làm cách nào để thoát một chuỗi trong HTML bằng Javascript?

Làm cách nào để mã hóa các tham số URL trong AngularJs?