Hướng dẫn remove html special characters from string javascript - xóa các ký tự đặc biệt html khỏi chuỗi javascript

323

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

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, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Dthree

Phim huy hiệu vàng 18,9K1414 gold badges71 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,9K4 Huy hiệu vàng55 Huy hiệu bạc71 Huy hiệu đồng4 gold badges55 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) );
});

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

vsync

109K54 Huy hiệu vàng287 Huy hiệu bạc372 Huy hiệu đồng54 gold badges287 silver badges372 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ụ:

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

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.8655 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.9271 Huy hiệu vàng28 Huy hiệu bạc28 Huy hiệu đồng1 gold badge28 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

Huy hiệu vàng 12K1149 Huy hiệu bạc98 Huy hiệu đồng11 gold badges49 silver badges98 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

5894 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 '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

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

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

76484

6.1003 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.3711 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) );
});

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

document.body.textContent = 'a <b> c </b>';

Đã 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

21.1k9 Huy hiệu vàng110 Huy hiệu bạc99 Huy hiệu đồng9 gold badges110 silver badges99 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.2772 Huy hiệu vàng28 Huy hiệu bạc23 Huy hiệu đồng2 gold badges28 silver badges23 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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Đã 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

8979 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) );
});

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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

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:

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

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

AdjenksadjenksADJenks

2.54824 Huy hiệu bạc34 Huy hiệu đồng24 silver badges34 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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Đã 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,8182 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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Đã 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

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Đã 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('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

Đã 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

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

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

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

JD.

2.9952 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) );
});

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

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

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

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

KostiantynkostiantynKostiantyn

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

2

Làm cách nào để loại bỏ các ký tự đặc biệt khỏi chuỗi trong HTML?

Tôi có thể thoát khỏi các ký tự đặc biệt HTML trong JavaScript không?

Escapehtml trong JavaScript là gì?

Các hàm unescape () và Escape () là gì?