Html SpecialChars tương đương trong Javascript?

Rõ ràng, điều này khó tìm thấy hơn tôi nghĩ. Và nó thậm chí rất đơn giản ...

Có một chức năng tương đương với htmlspecialchars của PHP được tích hợp trong Javascript không? Tôi biết việc tự thực hiện điều đó khá dễ dàng, nhưng sử dụng chức năng tích hợp, nếu có, chỉ là đẹp hơn.

Đối với những người không quen thuộc với PHP, htmlspecialchars dịch các thứ như <htmltag/>vào<htmltag/>

Tôi biết điều đó escape()và encodeURI()không làm việc theo cách này.

Có một vấn đề với mã giải pháp của bạn - nó sẽ chỉ thoát khỏi lần xuất hiện đầu tiên của mỗi ký tự đặc biệt. Ví dụ:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

Đây là mã hoạt động đúng:

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

Cập nhật

Đoạn mã sau sẽ tạo ra kết quả giống hệt như trên, nhưng nó hoạt động tốt hơn, đặc biệt là trên các khối văn bản lớn (cảm ơn jbo5112 ).

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

Đó là mã hóa HTML. Không có chức năng javascript gốc để làm điều đó, nhưng bạn có thể google và nhận được một số cái được thực hiện độc đáo.

Ví dụ: http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDIT:
Đây là những gì tôi đã thử nghiệm:

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

Đầu ra: <htmltag/>

Đáng đọc: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

Lưu ý : Chỉ chạy cái này một lần. Và đừng chạy nó trên các chuỗi đã được mã hóa, ví dụ như &trở thành&

Với jQuery, nó có thể như thế này:

var escapedValue = $('<div/>').text(value).html();

Từ câu hỏi liên quan Thoát chuỗi HTML bằng jQuery

Như đã đề cập trong bình luận, trích dẫn kép và trích dẫn đơn được để nguyên cho việc thực hiện này. Điều đó có nghĩa là không nên sử dụng giải pháp này nếu bạn cần tạo thuộc tính phần tử dưới dạng chuỗi html thô.

Đây là một chức năng để thoát HTML:

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

Và để giải mã:

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.js cung cấp một chức năng cho việc này:

_.escape(string)

Thoát một chuỗi để chèn vào HTML, thay thế các ký tự &, <,>, "và '.

http://underscorejs.org/#escape

Đây không phải là một chức năng Javascript tích hợp, nhưng nếu bạn đã sử dụng Underscore thì đó là một cách thay thế tốt hơn so với việc viết chức năng của riêng bạn nếu chuỗi chuyển đổi của bạn không quá lớn.

Tuy nhiên, một điều nữa là từ bỏ hoàn toàn ánh xạ ký tự và thay vào đó chuyển đổi tất cả các ký tự không mong muốn thành các tham chiếu ký tự số tương ứng của chúng, ví dụ:

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

Lưu ý rằng RegEx được chỉ định chỉ xử lý các ký tự cụ thể mà OP muốn thoát, nhưng tùy thuộc vào ngữ cảnh mà HTML thoát sẽ được sử dụng, các ký tự này có thể không đủ. Bài viết của Ryan Grove Có nhiều thoát HTML hơn &, <,> và " là một bài đọc tốt về chủ đề này. Và tùy thuộc vào ngữ cảnh của bạn, RegEx sau đây rất có thể cần thiết để tránh tiêm XSS:

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

mẫu vật :

var toto = "test<br>";
alert(toto.escapeHTML());

Có thể bạn không cần một chức năng như vậy. Vì mã của bạn đã có trong trình duyệt *, bạn có thể truy cập trực tiếp vào DOM thay vì tạo và mã hóa HTML sẽ phải được giải mã ngược bởi trình duyệt thực sự được sử dụng.

Sử dụng thuộc innerTexttính để chèn văn bản đơn giản vào DOM một cách an toàn và nhanh hơn nhiều so với sử dụng bất kỳ chức năng thoát nào được trình bày. Thậm chí nhanh hơn việc gán một chuỗi tiền mã hóa tĩnh cho innerHTML.

Sử dụng classListđể chỉnh sửa các lớp, datasetđể đặt data-thuộc tính và setAttributecho người khác.

Tất cả những điều này sẽ xử lý thoát cho bạn. Chính xác hơn, không cần thoát và không mã hóa sẽ được thực hiện bên dưới **, vì bạn đang làm việc xung quanh HTML, biểu diễn văn bản của DOM.

// use existing element
var author = 'John "Superman" Doe <john@example.com>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;

// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);

// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);

.important { color: red; }

<div id="first"></div>

* Câu trả lời này không dành cho người dùng JavaScript phía máy chủ (Node.js, v.v. )

** Trừ khi bạn chuyển đổi rõ ràng thành HTML thực tế sau đó. Ví dụ: bằng cách truy cập innerHTML- đây là những gì xảy ra khi bạn chạy được $('<div/>').text(value).html();đề xuất trong các câu trả lời khác. Vì vậy, nếu mục tiêu cuối cùng của bạn là chèn một số dữ liệu vào tài liệu, bằng cách thực hiện theo cách này, bạn sẽ thực hiện công việc hai lần. Ngoài ra, bạn có thể thấy rằng trong HTML kết quả, không phải mọi thứ đều được mã hóa, chỉ có mức tối thiểu cần thiết để nó hợp lệ. Nó được thực hiện một cách phụ thuộc vào ngữ cảnh, đó là lý do tại sao phương thức jQuery này không mã hóa các trích dẫn và do đó không nên được sử dụng như một công cụ thoát hiểm cho mục đích chung. Báo giá thoát là cần thiết khi bạn xây dựng HTML dưới dạng một chuỗi với dữ liệu không đáng tin cậy hoặc có chứa trích dẫn tại vị trí của giá trị thuộc tính. Nếu bạn sử dụng API DOM, bạn hoàn toàn không phải lo lắng về việc thoát.

Đối với người dùng Node.JS (hoặc người dùng sử dụng thời gian chạy Jade trong trình duyệt), bạn có thể sử dụng chức năng thoát của Jade.

require('jade').runtime.escape(...);

Không có ý nghĩa trong việc tự viết nó nếu người khác đang duy trì nó. :)

Tôi đang giải thích một chút về câu trả lời của okw.

Bạn có thể sử dụng các chức năng DOM của trình duyệt cho điều đó.

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

Điều này trở lại <escapeThis>&

Nó sử dụng hàm tiêu chuẩn createElementđể tạo một phần tử vô hình, sau đó sử dụng hàm textContentđể đặt bất kỳ chuỗi nào làm nội dung của nó và sau đó innerHTMLlấy nội dung trong biểu diễn HTML của nó.

function htmlspecialchars(str) {
 if (typeof(str) == "string") {
  str = str.replace(/&/g, "&"); /* must do & first */
  str = str.replace(/"/g, """);
  str = str.replace(/'/g, "'");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

Hy vọng điều này sẽ thắng cuộc đua do hiệu suất của nó và quan trọng nhất không phải là logic chuỗi bằng cách sử dụng .replace ('&', '&'). Thay thế ('<', '<') ...

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

function escapeHtml(str) 
{   
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

Đảo ngược một:

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

OWASP khuyến nghị rằng "[e] xcept cho các ký tự chữ và số, [bạn nên] thoát tất cả các ký tự có giá trị ASCII nhỏ hơn 256 với &#xHH;định dạng (hoặc một thực thể được đặt tên nếu có) để ngăn chặn chuyển ra khỏi thuộc tính [một]."

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

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

Giải pháp này sử dụng mã số của các ký tự, ví dụ <được thay thế bằng <.

Mặc dù hiệu suất của nó kém hơn một chút so với giải pháp sử dụng bản đồ , nhưng nó có những ưu điểm:

• Không phụ thuộc vào thư viện hoặc DOM
• Khá dễ nhớ (bạn không cần phải ghi nhớ 5 ký tự thoát HTML)
• Mã nhỏ
• Nhanh chóng hợp lý (vẫn nhanh hơn 5 chuỗi thay thế)