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["'", '''];
}

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] ];
}];

Ví dụ:

//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] ];
}];

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 '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[/[&