Hướng dẫn javascript escape html tags - javascript thoát thẻ html

Tôi muốn hiển thị văn bản cho HTML bằng hàm JavaScript. Làm thế nào tôi có thể thoát khỏi các ký tự đặc biệt HTML trong JavaScript? Có API không?

Đã hỏi ngày 4 tháng 6 năm 2011 lúc 4:50Jun 4, 2011 at 4:50

3

Đây là một giải pháp sẽ hoạt động trong thực tế mọi trình duyệt web:

function escapeHtml(unsafe)
{
    return unsafe
         .replace(/&/g, "&")
         .replace(//g, ">")
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }

Nếu bạn chỉ hỗ trợ các trình duyệt web hiện đại (2020+), thì bạn có thể sử dụng chức năng Replaceall mới:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

Dthree

Phim huy hiệu vàng 18,8K1414 gold badges70 silver badges103 bronze badges

Đã trả lời ngày 4 tháng 6 năm 2011 lúc 5:00Jun 4, 2011 at 5:00

Bjorndbjorndbjornd

21.8K4 Huy hiệu vàng54 Huy hiệu bạc71 Huy hiệu đồng4 gold badges54 silver badges71 bronze badges

13

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

vsync

107K53 Huy hiệu vàng285 Huy hiệu bạc370 Huy hiệu đồng53 gold badges285 silver badges370 bronze badges

Đã trả lời ngày 20 tháng 8 năm 2014 lúc 2:50Aug 20, 2014 at 2:50

Spiderlamaspiderlamaspiderlama

1.44314 Huy hiệu bạc10 Huy hiệu đồng14 silver badges10 bronze badges

2

Bạn có thể sử dụng chức năng

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

3 của JQuery.

Ví dụ:

http://jsfiddle.net/9H6Ch/

Từ tài liệu jQuery liên quan đến hàm

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

3:

Chúng ta cần lưu ý rằng phương pháp này thoát khỏi chuỗi được cung cấp khi cần thiết để nó sẽ hiển thị chính xác trong HTML. Để làm như vậy, nó gọi phương thức DOM .CreateTextNode (), không hiểu chuỗi là HTML.

Các phiên bản trước của tài liệu jQuery đã nói theo cách này (nhấn mạnh thêm):

Chúng ta cần lưu ý rằng phương pháp này thoát khỏi chuỗi được cung cấp khi cần thiết để nó sẽ hiển thị chính xác trong HTML. Để làm như vậy, nó gọi phương thức DOM .CreateTextNode (), thay thế các ký tự đặc biệt bằng các tương đương thực thể HTML của chúng (chẳng hạn như & lt;which replaces special characters with their HTML entity equivalents (such as < for <).

FGB

18.3k2 Huy hiệu vàng37 Huy hiệu bạc52 Huy hiệu Đồng2 gold badges37 silver badges52 bronze badges

Đã trả lời ngày 4 tháng 6 năm 2011 lúc 5:01Jun 4, 2011 at 5:01

Jeremysawesmyjeremysawiejeremysawesome

6.8355 Huy hiệu vàng33 Huy hiệu bạc37 Huy hiệu đồng5 gold badges33 silver badges37 bronze badges

2

Sử dụng Lodash:

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

Mã nguồn

Đã trả lời ngày 30 tháng 10 năm 2016 lúc 19:41Oct 30, 2016 at 19:41

cs01cs01cs01

4,8691 Huy hiệu vàng27 Huy hiệu bạc28 Huy hiệu đồng1 gold badge27 silver badges28 bronze badges

3

Tôi nghĩ rằng tôi đã tìm thấy cách thích hợp để làm điều đó ...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

Đã trả lời ngày 7 tháng 8 năm 2013 lúc 16:16Aug 7, 2013 at 16:16

Lvellalvellalvella

11.9k11 Huy hiệu vàng49 Huy hiệu bạc97 Huy hiệu Đồng11 gold badges49 silver badges97 bronze badges

4

Đây là, cho đến nay, cách nhanh nhất tôi đã thấy nó được thực hiện. Thêm vào đó, nó làm tất cả mà không cần thêm, xóa hoặc thay đổi các yếu tố trên trang.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

Đã trả lời ngày 2 tháng 1 năm 2018 lúc 0:11Jan 2, 2018 at 0:11

Arjunpatarjunpatarjunpat

5794 Huy hiệu bạc10 Huy hiệu đồng4 silver badges10 bronze badges

4

Thật thú vị khi tìm ra một giải pháp tốt hơn:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&';
      case '<':
        return '<';
      case '"':
        return '"';
      default:
        return ''';
    }
  });
};

Tôi không phân tích cú pháp

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

5 vì nó không phá vỡ mã XML/HTML trong kết quả.

Dưới đây là điểm chuẩn: http://jsperf.com/regexpairs, tôi đã tạo một hàm

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

6 phổ quát: http://jsperf.com/regexpairs2

76484

6.0403 Huy hiệu vàng16 Huy hiệu bạc27 Huy hiệu đồng3 gold badges16 silver badges27 bronze badges

Đã trả lời ngày 11 tháng 2 năm 2015 lúc 15:41Feb 11, 2015 at 15:41

Iegikiegikiegik

1.3611 Huy hiệu vàng16 Huy hiệu bạc29 Huy hiệu đồng1 gold badge16 silver badges29 bronze badges

4

Cách ngắn gọn và hiệu suất nhất để hiển thị văn bản không được mã hóa là sử dụng thuộc tính

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

7.

Nhanh hơn sử dụng

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

8. Và đó là không tính đến việc trốn thoát trên cao.

document.body.textContent = 'a  c ';

Đã trả lời ngày 29 tháng 11 năm 2017 lúc 2:57Nov 29, 2017 at 2:57

Người dùnguser

20.8k9 Huy hiệu vàng109 Huy hiệu bạc98 Huy hiệu Đồng9 gold badges109 silver badges98 bronze badges

1

Các phần tử DOM Hỗ trợ chuyển đổi văn bản thành HTML bằng cách gán cho InnerText. Innertext không phải là một chức năng nhưng gán cho nó hoạt động như thể văn bản đã được thoát ra.innerText. innerText is not a function but assigning to it works as if the text were escaped.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

Đã trả lời ngày 21 tháng 8 năm 2017 lúc 10:27Aug 21, 2017 at 10:27

Teknopaultknopaulteknopaul

6.2172 Huy hiệu vàng28 Huy hiệu bạc22 Huy hiệu đồng2 gold badges28 silver badges22 bronze badges

2

Bạn có thể mã hóa mọi ký tự trong chuỗi của mình:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

0

Hoặc chỉ nhắm mục tiêu các nhân vật chính phải lo lắng về (&, sự phá vỡ,, "và ') như:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

1

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

2

Đã trả lời ngày 26 tháng 7 năm 2015 lúc 13:54Jul 26, 2015 at 13:54

Dave Browndave BrownDave Brown

8879 Huy hiệu bạc6 Huy hiệu Đồng9 silver badges6 bronze badges

1

Bởi những cuốn sách

OWASP khuyến nghị rằng "[e] xcept cho các ký tự chữ và số, [bạn nên] thoát khỏi tất cả các ký tự có giá trị ASCII nhỏ hơn 256 với định dạng

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

9 (hoặc một thực thể được đặt tên nếu có sẵn) để ngăn chặn việc chuyển ra khỏi thuộc tính [một]."

Vì vậy, đây là một chức năng làm điều đó, với một ví dụ sử dụng:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

3

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

4

Bạn nên xác minh phạm vi thực thể tôi đã cung cấp để tự xác nhận sự an toàn của chức năng. Bạn cũng có thể sử dụng biểu thức thông thường này có khả năng đọc tốt hơn và nên bao gồm cùng một mã ký tự, nhưng ít hơn khoảng 10% trong trình duyệt của tôi:

0

Đã trả lời ngày 4 tháng 3 năm 2021 lúc 19:40Mar 4, 2021 at 19:40

AdjenksadjenksADJenks

2.51924 Huy hiệu bạc31 Huy hiệu đồng24 silver badges31 bronze badges

0

Nếu bạn đã sử dụng các mô-đun trong ứng dụng của mình, bạn có thể sử dụng mô-đun Escape-HTML.

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

5

Đã trả lời ngày 11 tháng 3 năm 2020 lúc 15:13Mar 11, 2020 at 15:13

Shimon sshimon sShimon S

3.7782 Huy hiệu vàng26 Huy hiệu bạc33 Huy hiệu Đồng2 gold badges26 silver badges33 bronze badges

Tôi đã bắt gặp vấn đề này khi xây dựng một cấu trúc DOM. Câu hỏi này đã giúp tôi giải quyết nó. Tôi muốn sử dụng một chevron kép làm dấu phân cách đường dẫn, nhưng việc nối thêm một nút văn bản mới trực tiếp dẫn đến mã ký tự thoát ra, thay vì chính ký tự:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

6

Đã trả lời ngày 30 tháng 7 năm 2019 lúc 8:36Jul 30, 2019 at 8:36

SilassilasSilas

Huy hiệu 111 Đồng1 bronze badge

Chỉ cần viết mã ở giữa

1. Hãy chắc chắn rằng bạn thêm tên lớp trong thẻ mã. Nó sẽ thoát khỏi tất cả các đoạn trích HTML được viết trong

1.

1.

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

7

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

8

Đã trả lời ngày 14 tháng 4 năm 2021 lúc 8:41Apr 14, 2021 at 8:41

Sử dụng điều này để xóa các thẻ HTML khỏi chuỗi trong JavaScript:

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
}

9

Đã trả lời ngày 10 tháng 9 năm 2020 lúc 14:40Sep 10, 2020 at 14:40

1

Hãy thử điều này, sử dụng thư viện

3:

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

0

Hãy thử một bản demo

JD.

2.9852 Huy hiệu vàng25 Huy hiệu bạc37 Huy hiệu đồng2 gold badges25 silver badges37 bronze badges

Đã trả lời ngày 16 tháng 4 năm 2014 lúc 20:48Apr 16, 2014 at 20:48

May mắn may mắnLucky

7152 Huy hiệu vàng10 Huy hiệu bạc27 Huy hiệu đồng2 gold badges10 silver badges27 bronze badges

1

Tôi đã đưa ra giải pháp này.

Giả sử rằng chúng tôi muốn thêm một số HTML vào phần tử với dữ liệu không an toàn từ người dùng hoặc cơ sở dữ liệu.

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

1

Nó không an toàn chống lại các cuộc tấn công XSS.Bây giờ thêm điều này: $ (Document.CreateEement ('Div')). HTML (không an toàn) .text ();

Nên nó là

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

2

Đối với tôi, điều này dễ dàng hơn nhiều so với việc sử dụng

4 và nó sẽ loại bỏ !!!Tất cả các thẻ HTML có thể (tôi hy vọng).

Đã trả lời ngày 30 tháng 3 năm 2016 lúc 9:53Mar 30, 2016 at 9:53

KostiantynkostiantynKostiantyn

1.5561 Huy hiệu vàng14 Huy hiệu bạc20 Huy hiệu Đồng1 gold badge14 silver badges20 bronze badges

2