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

Tôi muốn hiển thị văn bản sang HTML bằng chức năng javascript. Làm cách nào tôi có thể thoát được ký tự html đặc biệt trong JS? Có API không?

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

Bạn có thể sử dụng chức năng của jQuery.text() .

Ví dụ:

http://jsfiddle.net/9H6Ch/

Từ tài liệu jQuery liên quan đến .text()chức năng:

Chúng ta cần lưu ý rằng phương thức 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 đã diễn đạt theo cách này ( nhấn mạnh thêm ):

Chúng ta cần lưu ý rằng phương thức 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; cho <).

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

Sử dụng lodash

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

mã nguồn

Đây là, 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;
}

Thật thú vị khi tìm 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 >vì nó không phá vỡ mã XML / HTML trong kết quả.

Dưới đây là các điểm chuẩn: http://jsperf.com/regExairs Ngoài ra, tôi đã tạo một escapechức năng phổ quát : http://jsperf.com/regapidairs2

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

Nhanh hơn sử dụng innerHTML. Và đó là không có tài khoản thoát trên đầu.

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

Hỗ trợ DOM Elements chuyển đổi văn bản sang HTML bằng cách gán cho innerText . InternalText không phải là một chức năng nhưng việc gán cho nó hoạt động như thể văn bản đã được thoát.

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

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

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Hoặc chỉ nhắm mục tiêu các nhân vật chính để lo lắng về (&, inebreaks, <,>, "và ') như:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

Một lớp lót (cho ES6 +):

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

Đối với phiên bản cũ hơn:

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

Đã giải quyết vấn đề này khi xây dựng 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 tách đường dẫn, nhưng 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 được hiển thị, thay vì chính ký tự:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

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 esc-html .

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

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

string.escapeHTML();

Hãy thử bản demo

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ử có dữ liệu không an toàn từ người dùng hoặc cơ sở dữ liệu.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

Nó không an toàn trước các cuộc tấn công XSS. Bây giờ thêm điều này.

$(document.createElement('div')).html(unsafe).text();

Nên nó là

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

Đối với tôi điều này dễ hơn nhiều so với việc sử dụng .replace()và nó sẽ loại bỏ !!! tất cả các thẻ html có thể (tôi hy vọng).