thoát Quotes Trong HTML5 dữ liệu thuộc tính Sử dụng Javascript

Tôi đang sử dụng jQuery .data() để làm việc với tùy chỉnh HTML5 thuộc tính dữ liệu trong đó giá trị của thuộc tính cần để có thể chứa cả dấu nháy đơn và dấu ngoặc kép:thoát Quotes Trong HTML5 dữ liệu thuộc tính Sử dụng Javascript

<p class="example" data-example="She said "WTF" on last night's show.">

Tôi biết sử dụng các mã ký tự như " trong giá trị thuộc tính dữ liệu có thể thực hiện công việc trên, nhưng tôi không thể luôn kiểm soát cách các giá trị được nhập. Thêm vào đó, tôi cần để có thể sử dụng các thẻ HTML trong đánh dấu, như thế này:

<p class="example" data-example=" 
She said "<abbr title="What The F***">WTF</abbr>" on last night's show. 
">

Nếu một số hình thức .replace() là câu trả lời, sau đó nó cần phải được thực hiện trước khi giá trị được đọc bởi .data() -maybe bởi áp dụng nó trên toàn bộ <body>?

Thoát dấu gạch chéo ngược thông thường như <abbr title="te\'st">WTF</abbr> cũng không hoạt động.

Lý tưởng này sẽ có sự linh hoạt để làm việc w/cả:

data-example="..." và data-example='...'

Nhưng nếu bạn chỉ có thể một trong những cách sau đó tôi có thể ít nhất là cuộn với điều đó. Ý tưởng?

Cập nhật - một số bối cảnh hơn:

Tôi đang làm việc về vấn đề này cho responsejs.com. Một ứng dụng thực tế của điều này có thể là chỉ tải một thanh bên cho các trình duyệt trên một chiều rộng nhất định (và điều này được xử lý trong trình duyệt chứ không phải là PHP). Trong trường hợp của WordPress ví dụ, thanh bên có thể chứa các widget, hình ảnh, vv Các trích dẫn trong các thẻ PHP là một b/c không được phân tích, chúng được phân tích thành HTML trước khi chúng tới trình duyệt. Ví dụ:

<aside id="primary" class="sidebar" 

     data-oweb=' 

      <?php dynamic_sidebar('primary'); ?> 

     ' 
    > 

    optional default markup for mobile and no-js browsers here 

</aside>

Nguồn

2011-08-31 ryanve

JavaScript sẽ không giúp bạn sau khi trang đã hiển thị để sửa các trích dẫn của thẻ. Phải được thực hiện trên máy chủ. – epascarello

Không có cách nào xung quanh nó, bạn phải thoát khỏi các giá trị đúng cách hoặc không thể phân tích cú pháp HTML đúng cách. Bạn không thể sử dụng Javascript để sửa mã sau khi nó được phân tích cú pháp, vì sau đó nó đã thất bại.

dụ của bạn với mã hóa HTML thích hợp sẽ là:

<p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show.">

Bạn không thể sử dụng dấu chéo ngược để thoát khỏi nhân vật, bởi vì nó không phải là mã Javascript. Bạn sử dụng các thực thể HTML để thoát khỏi các ký tự trong mã HTML.

Nếu bạn không thể kiểm soát cách dữ liệu được nhập, thì bạn sẽ bị hỏng. Bạn chỉ cần tìm cách kiểm soát nó.

Nguồn

2011-08-31 17:34:26 Guffa

Sử dụng 'htmlspecialchars()' với 'ENT_QUOTES' để in, ví dụ: '' Để biết thêm thông tin: http://php.net/manual/en/function.htmlspecialchars.php –

Để trở thành html đúng, bạn phải thoát khỏi các ký tự phiền hà. Tôi muốn thoát chúng với các thực thể HTML. Điều này có nghĩa là bất kỳ công cụ nào đang được sử dụng để nhập thông tin này sẽ phải lưu trữ chúng đúng cách và/hoặc công cụ truy xuất chúng trên đầu cuối sẽ phải thoát chúng.

Sau đó, nếu bạn muốn sử dụng chúng trong JS của mình, bạn phải chạy một số chức năng tìm và thay thế để chuyển đổi các ký tự trở lại thành HTML và trích dẫn.

Hầu hết các ngôn ngữ lập trình nền sau có một số chức năng 'htmlescape/unescape', do đó không nên khó.

Để hủy thoát nó qua jQuery, đây là một cái gì đó tìm thấy thông qua một cách nhanh chóng của Google: http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Nguồn

2011-08-31 16:25:48

Cần phải thay thế các ký tự được mã hóa trở lại - giá trị thuộc tính, khi truy cập qua js, đã được chuẩn hóa trở lại văn bản thuần túy – shesek

Nếu họ có được chuỗi HTML với " và ' và không có điều gì, tại sao không chỉ làm cho các phần tử HTML riêng biệt cho họ: http://jsfiddle.net/N7XXu/.

Ví dụ:HTML:

<p class="example" data-which="1">a</p> 

<p class="example-data" data-which="1">She said "<abbr title="What The F***">WTF</abbr>" on last night's show.</p>

kết hợp với JavaScript sau:

$('.example').each(function() { 
    var correspondingElem = $('.example-data[data-which="' 
           + $(this).data('which') 
           + '"]'); 
    $(this).data('example', correspondingElem.html()); 
}); 

alert($('.example').data('example'));

Tất nhiên, ẩn .example-data yếu tố.

Nguồn

2011-08-31 16:53:48 pimvdb

Cảm ơn — thật tuyệt nhưng đối với những gì tôi cần để nó không bay. Tôi vừa cập nhật câu hỏi với một số ngữ cảnh khác. – ryanve

-1

Sử dụng phương pháp btoa để thiết lập các dữ liệu và các atob phương pháp để có được nó:

$(document).data("test2",btoa('She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">'))

Hoặc đơn giản là dereference chuỗi như là một biến:

var stringer = 'She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">' 

$(document).data("test2",stringer);

Tài liệu tham khảo

HTML5 Living Standard, Web application APIs: Base64 utility methods

Nguồn

2012-08-28 14:33:35

Đây là một công cụ đơn giản tôi đã tạo, bạn có thể sử dụng để mã hóa html:

Bí quyết là để thoát khỏi nó hai lần.

Tôi đã thêm một \ n thay thế để giữ nguyên văn bản nhiều dòng vì văn bản bị hủy bỏ bởi văn bản().

Ngoài ra, bạn cần thoát khỏi các dấu ngoặc kép để đảm bảo an toàn cho thuộc tính dữ liệu.

<div id="esc"></div> 
<textarea id="escinput" placeholder="Enter text"></textarea> 
<script> 
    $("#escinput").bind("change paste keyup", function(){ 
     $("#esc").text($(this).val().replace(/\n/g,'\\n')); 
     $("#esc").text($("#esc").html().replace(/"/g, '&quot;')); 
    });    
</script>

Điều này sẽ tạo chuỗi an toàn thuộc tính dữ liệu.

Bạn có thể kiểm tra nó ở đây: http://jsfiddle.net/SplicePHP/n6HFq/

Để giải mã nó trở lại html chỉ cần sử dụng:

<script> 
    var attr = $("#idOfElement").data('attribute'); 
    var decoded = $('<textarea/>').html(attr).val(); 
</script>

Nguồn

2014-04-25 10:41:03

Sử dụng encodeURI để thoát khỏi dấu ngoặc kép trong đối tượng JSON của bạn. Phân tích chuỗi bằng decodeURI.

var popup = document.getElementById('popup'), 
 
    msgObj = JSON.parse(decodeURI(popup.dataset.message)); 
 

 
console.log(msgObj);

<a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />

Nguồn

2015-03-06 22:35:01

mới để Stack Overflow vì vậy tôi không có đủ điểm đại diện bỏ phiếu, nhưng tôi muốn làm rõ các giải pháp như tôi hiểu sai câu trả lời chấp nhận bởi @Guffa rằng tôi đã hơi say.

Tôi có câu hỏi tương tự về các ký tự thoát/đặc biệt trong thuộc tính dữ liệu HTML5. Câu hỏi/giải pháp: Escape/Special Characters from user input to HTML5 data-attributes using URL Encode/Decode

Dan Smith cung cấp giải pháp tôi đã sử dụng với encodeURI()/decodeURI(). Tuy nhiên, tôi đã loại bỏ nó ban đầu bởi vì nó đã cho đến nay xuống chỉ với 1 điểm rep.

Bất kỳ câu trả lời nào bằng cách tự thoát các ký tự trở nên lộn xộn và tốn thời gian.

Bất kỳ câu trả lời nào với phương thức escape() hiện không được chấp nhận. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

Nguồn

2015-05-06 18:00:16 CreatordotJS

Tôi muốn lưu trữ dữ liệu trong javascript trực tiếp. Thay vì điều này:

<p class="example" data-oweb="<?=str_replace('\'', '\\\'', $var)?>">Content</p> 
<script> 
    var example = $('.example').data("example"); 
    DoSomething(example); 
</script>

Làm điều này:

<p class="example">Content</p> 
<script> 
    var example = '<?=str_replace('\'', '\\\'', $var)?>'; 
    DoSomething(example); 
</script>

Hoặc nếu sử dụng trong một kịch bản từ xa bạn kiểm soát, lưu trữ các giá trị (s) trong một toàn cầu:

<p class="example">Content</p> 
<script> 
    window.MyDataValues={}; 
    window.MyDataValues.Example = '<?=str_replace('\'', '\\\'', $var)?>'; 
</script>

Hoặc nếu bạn không thể kiểm soát tập lệnh từ xa và thông tin phải được lưu trữ dưới dạng thuộc tính dữ liệu, bạn có thể đặt nó bằng javascript sau khi bạn tìm ra cách để nhắm mục tiêu đoạn:

<p id="example" data-oweb>Content</p> 
<script> 
    document.getElementById("example"); 
    element.dataset.oweb = '<?=str_replace('\'', '\\\'', $var)?>'; 
</script>

Nguồn

2015-12-22 08:36:42 Nenotlep

Đó là một chút khó khăn nhưng bạn có thể chọn đối tượng dom với thuộc tính data chứa dấu nháy đơn. Bí quyết là \\'

<div id="text" data-message="Stanley Kubrick's Oranges">Hello</div> 

<script> 
    var message = "Stanley Kubrick\\'s Oranges"; 
    $("#text[data-message='"+message+"']").fadeOut("slow"); 
</script>

Fiddle

Nguồn

2017-03-07 14:42:10 kastelli

Như tôi đã sử dụng thuộc tính dữ liệu để vận chuyển một số dữ liệu cùng với các yếu tố html từ PHP đến JavaScript, tôi chỉ sử dụng base64_encode trên backend, sau đó trên máy khách sử dụng bên base64Decode(input) để lấy lại dữ liệu. Bằng cách này tôi tránh bất kỳ và tất cả thoát orgy. Mã JavasScript tôi sử dụng được đặt tại đây http://www.webtoolkit.info/

Nguồn

2018-01-16 12:25:22 Heinz

Đã có một câu trả lời được chấp nhận, giải quyết vấn đề của OP . Hơn nữa mục đích duy nhất của câu trả lời là giải quyết vấn đề của OP. –

thoát Quotes Trong HTML5 dữ liệu thuộc tính Sử dụng Javascript

Trả lời

Các vấn đề liên quan