এইচটিএমএল বৈশিষ্ট্যে জেএসএন সংরক্ষণ করার সর্বোত্তম উপায়?

112

আমার এইচটিএমএল উপাদানটিতে একটি JSON অবজেক্টটি একটি অ্যাট্রিবিউটের মধ্যে রাখতে হবে।

~~এইচটিএমএলকে বৈধতা দেওয়ার দরকার নেই।~~

কোয়ান্টিনের জবাব: জেএসওএন একটি data-*বৈশিষ্ট্যে সংরক্ষণ করুন যা বৈধ এইচটিএমএল 5।
JSON অবজেক্ট যে কোনও আকার হতে পারে - অর্থাত্ বিশাল

মাইকু মরির উত্তর: একটি এইচটিএমএল বৈশিষ্ট্যের সীমা সম্ভাব্য 65536 টি অক্ষর ।
JSON এ যদি বিশেষ অক্ষর থাকে? যেমন {foo: '<"bar/>'}

কোয়ান্টিনের জবাব: জেনসন স্ট্রিংটিকে সাধারণ কনভেনশন অনুসারে অ্যাট্রিবিউটে রাখার আগে এনকোড করুন। পিএইচপি-র জন্য, ফাংশনটি ব্যবহার করুন । htmlentities()

সম্পাদনা - পিএইচপি এবং jQuery ব্যবহার করে উদাহরণ সমাধান

এইচটিএমএল বৈশিষ্ট্যটিতে JSON লেখা:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

JQuery ব্যবহার করে JSON পুনরুদ্ধার করা:

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

— BadHorsie
সূত্র

আপনার সম্ভবত কারণ ব্যাখ্যা করা উচিত এবং বিভিন্ন সমাধানের জন্য জিজ্ঞাসা করা উচিত কারণ আমি নিশ্চিত যে এটি সবচেয়ে ভাল নয়। আপনি ডেটা-কিছু বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন তবে তারা "বিশাল" পরিমাণের পাঠ্য ধারণ করতে পারে কিনা তা আমি নিশ্চিত নই। বিশেষ চরিত্র হিসাবে আপনি কেবল পাঠ্যটি এনকোড করতে পারবেন (পলায়ন () এবং আনস্কেপ ())।

— মাইকু মোরি

হ্যাঁ সীমা 65536 টি অক্ষর ( স্ট্যাকওভারফ্লো / প্রশ্ন / 2752457/… )

— মাইকু মরি

1

বিটিডব্লিউ, যদি আপনার অ্যাট্রিবিউটটির নাম দেওয়া হয় তবে আপনার data-jsonব্যবহার করা উচিত $(this).data('json'), jQuery আপনি সেই অংশটি coveredেকে রেখেছেন।

— সায়েন্টিক

কেবলমাত্র একটি নোট, জেসসনে ডেটা-প্রত্যয়টির নামকরণের প্রয়োজন নেই। আপনি যদি কোনও ডাটা-কাস্টম_অ্যাট্রিবিউটে বৈধ জসন রাখেন তবে এটি jQuery এর সাথে দুর্দান্ত কাজ করবে।

— গ্যারেট ক্লোবর্ন

ধনুর্বন্ধনী ক্রম ঠিক করুন)}; =>});

— মটসমিশন

41

এইচটিএমএলকে বৈধতা দেওয়ার দরকার নেই।

কেন না? বৈধতা সত্যই সহজ QA যা প্রচুর ভুল ধরা দেয়। এইচটিএমএল 5 data-*বৈশিষ্ট্য ব্যবহার করুন ।

জেএসওএন অবজেক্ট যে কোনও আকার হতে পারে (অর্থাত্ বিশাল)।

মাপের বৈশিষ্ট্যগুলির ব্রাউজারের সীমাতে আমি কোনও ডকুমেন্টেশন দেখিনি।

আপনি যদি এগুলি চালনা করেন তবে ডেটা একটিতে সংরক্ষণ করুন <script>। কোনও বস্তু এবং মানচিত্রের উপাদানটিকে idসেই বস্তুর সম্পত্তি নামের সংজ্ঞা দিন ine

JSON এ যদি বিশেষ অক্ষর থাকে? (যেমন {পরীক্ষা: '<"মাই স্ট্রিং />'})

অ্যাট্রিবিউট মানগুলিতে অবিশ্বস্ত ডেটা অন্তর্ভুক্ত করার জন্য কেবলমাত্র সাধারণ নিয়মগুলি অনুসরণ করুন। ব্যবহার করুন &এবং "(আপনি যদি ডাবল উদ্ধৃতিতে বিশিষ্ট মানটি মোড়কে থাকেন) বা '(আপনি যদি একক উদ্ধৃতিতে বিশিষ্ট মানটি মোড়কে থাকেন)।

নোট করুন, তবে এটি যে জেএসএন নয় (যার জন্য সম্পত্তির নামগুলি স্ট্রিং এবং স্ট্রিংগুলি কেবল ডাবল কোট দিয়ে সীমিত করা উচিত)।

— কোয়েন্টিন
সূত্র

5

সুতরাং আপনি বলছেন যে আমি htmlentities($json)এটি এইচটিএমএল বৈশিষ্ট্যটিতে রাখার আগে আমার করা উচিত ? এবং তারপরে আমি কীভাবে ডিকোড করব যখন আমি jQuery এ পড়তে চাই? এবং তারপরে আমি কীভাবে এটি পিএইচপি-তে একইভাবে jQuery ব্যবহার করে আবার লিখব?

— BadHorsie

6

সুতরাং আপনি বলছেন যে এইচটিএমএল বৈশিষ্ট্যটিতে রাখার আগে আমার html_encode ($ json) করা উচিত? - আপনি যদি পিএইচপি ব্যবহার করেন তবে তা কার্যকর হবে। এবং তারপরে আমি কীভাবে ডিকোড করব যখন আমি jQuery এ পড়তে চাই? - গুণ থেকে ডিকোড? ব্রাউজার এটি করবে যখন এটি এইচটিএমএলকে কোনও ডিওএম-তে পার্স করবে। এবং তারপরে আমি কীভাবে এটি পিএইচপি-তে একইভাবে jQuery ব্যবহার করে আবার লিখব? - আপনি ডিওএম নোডের বৈশিষ্ট্যগুলি সেট করছেন, কাঁচা এইচটিএমএল তৈরি করছেন না, ব্রাউজারটি এটির যত্ন নেবে।

— কোয়ান্টিন

1

এই মুহুর্তে আমার একটি সমস্যা রয়েছে যেখানে আমার ব্রাউজারটি বর্তমানে এটি গুগল ক্রোমে ডিকোডিং করছে না এবং আমি যখন জেএসওনকে বিশ্লেষণ করতে যাচ্ছি তখন সমস্ত HTML সত্তা সেগুলি সেখানে থাকে এবং ব্যর্থ হয়।

— ব্র্যাডলি ওয়েস্টন

আপনি যদি এটি কোনও স্ক্রিপ্ট ট্যাগে রাখেন তবে স্ক্রিপ্ট ট্যাগগুলির বিশেষ পরিচালনা করার কারণে আপনাকে এটিকে অন্যভাবে পালাতে হবে। উদাহরণস্বরূপ, এতে কোনও মান </ translation> এর সাথে স্ক্রিপ্ট ট্যাগটি শেষ হয়ে যায়।

— ডাবিস ভ্যান্ডারমিয়ার

16

আপনি এটি কোথায় রেখেছেন তার উপর নির্ভর করে,

আপনি <div>যেমন জিজ্ঞাসা করেছিলেন তেমন আপনাকে অবশ্যই নিশ্চিত করতে হবে যে জেএসএনে এমন কোনও HTML বিশেষ নেই যা কোনও ট্যাগ শুরু করতে পারে, এইচটিএমএল মন্তব্য, এমবেডড ডক্টাইপ ইত্যাদি আপনাকে অন্ততপক্ষে পালাতে হবে <এবং &এমনভাবে যাতে মূল চরিত্রটি না থাকে পালানো ক্রম হাজির।
ইন <script>উপাদান আপনি তা নিশ্চিত করার জন্য তাদেরকে JSON শেষ ট্যাগ না থাকে প্রয়োজন </script>: অথবা পলায়নের টেক্সট সীমানা ।
ইভেন্ট হ্যান্ডলারগুলিতে আপনাকে এটি নিশ্চিত করতে হবে যে এইচটিএমএল সত্তার মতো দেখতে এমন কিছু জিনিস রয়েছে এবং অ্যাট্রিবিউট সীমানা ( "বা ') ভঙ্গ করে না, এমনকি জেএসএন এর অর্থ সংরক্ষণ করে ।

প্রথম দুটি ক্ষেত্রে (এবং পুরানো জেএসএন পার্সারদের জন্য) আপনার ইউ + 2028 এবং ইউ + 2029 এনকোড করা উচিত কারণ এগুলি জাভাস্ক্রিপ্টে নতুন লাইনের অক্ষর, যদিও তারা জেএসএন-তে আনঙ্কডবিহীন স্ট্রিংগুলিতে অনুমতিপ্রাপ্ত।

শুদ্ধতার জন্য, আপনাকে পালাতে হবে \এবং জেএসওএন उद्धিত অক্ষরগুলি দরকার এবং সবসময় NUL এনকোড করা কোনও খারাপ ধারণা নয়।

যদি HTML কোনও সামগ্রী এনকোডিং ছাড়াই পরিবেশন করা হতে পারে তবে ইউটিএফ -7 আক্রমণ+ রোধ করতে আপনার এনকোড করা উচিত ।

যাই হোক না কেন, নীচের আসমান টেবিল কাজ করবে:

NUL -> \u0000
সিআর -> \nবা\u000a
এলএফ -> \rবা\u000d
" -> \u0022
& -> \u0026
' -> \u0027
+ -> \u002b
/-> \/বা\u002f
< -> \u003c
> -> \u003e
\-> \\বা\u005c
U + 2028 ->\u2028
ইউ + 2029 -> \u2029

সুতরাং পাঠ্যটির জন্য JSON স্ট্রিংয়ের মানটি Hello, <World>!শেষে একটি নতুন লাইনের সাথে থাকবে "Hello, \u003cWorld\u003e!\r\n"।

— মাইক স্যামুয়েল
সূত্র

1

return (input.replace(/([\s"'& + \ / \\ <> 20 u2028 \ u2029 \ u0000]) / জি, (ম্যাচ, পি 1) => {প্রত্যাবর্তন \\u${p1.codePointAt(0).toString(16).padStart(4, 0)}; })); `

— ডেনিস গিফেলার

14

আরেকটি উপায় আপনি এটা করতে পারেন - ভিতরে JSON তথ্য রাখা হয় <script>ট্যাগ, কিন্তু না type="text/javascript", কিন্তু সঙ্গে type="text/bootstrap"বা type="text/json"টাইপ, জাভাস্ক্রিপ্ট মৃত্যুদন্ড এড়ানো।

তারপরে, আপনার প্রোগ্রামের কোনও জায়গায়, আপনি এটির জন্য এটি জিজ্ঞাসা করতে পারেন:

function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

সার্ভার সাইডে, আপনি এটির মতো কিছু করতে পারেন (পিএইচপি এবং ট্যুইগ সহ এই উদাহরণ ):

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

— সের্গেই কামারদিন
সূত্র

1

জেএসএনের জন্য স্ক্রিপ্ট টাইপ "অ্যাপ্লিকেশন / জেসন" ব্যবহার করুন। এছাড়াও দীর্ঘকাল অবজেক্ট হিসাবে শীর্ষ স্তরেরটি রাখা ভাল।

— ওআইএস

1

এটি সরাসরি অপের প্রশ্নের উত্তর দেয় না তবে এটি এখনও আমার পক্ষে খুব সহায়ক ছিল। আমি যে ডেটা সঞ্চয় করছি তা পুরো পৃষ্ঠায় প্রযোজ্য এবং কোনও নির্দিষ্ট উপাদানকে নয়, তাই কোনও উপাদান বৈশিষ্ট্য সত্যই কাজ করে না (যদি না আমি এটি শরীরের উপাদানগুলিতে পছন্দ করি না, যা কেবল আমার জন্য ক্ষুদ্র খোঁড়া বলে মনে হয় বিশেষত আমার থেকে ডেটা বড় হতে পারে)। এটি কোনও <script type="application/json" id="MyData"></script>কাজের মধ্যে পুরোপুরি সংরক্ষণ করা । তারপর, ActiveWAFL / DblEj ব্যবহার করে, আমি এটা দেখতে পারেন সঙ্গে document.GetData("#MyData")।

— ইভান দে লা ক্রুজ

2

এই উত্তরে মিথ্যা / বিপজ্জনক তথ্য রয়েছে! স্ক্রিপ্টের ধরণ পরিবর্তন করা </ translation> ট্যাগগুলির সনাক্তকরণকে পরিবর্তন করে না। শুধু চেষ্টা করুন:<script type="application/json" id="MyData"> "abc</script><script>alert()</script>" </script>

— হাইপারকনট

12

অন্য বিকল্পটি হল JSON স্ট্রিংটিকে এনকোড করা বেস 64 এবং আপনার জাভাস্ক্রিপ্টে এটি ব্যবহার করার প্রয়োজন হলে এটি atob()ফাংশন দিয়ে ডিকোড করুন ।

var data = JSON.parse(atob(base64EncodedJSON));

— পাভেল পেট্রোভ
সূত্র

জন্য ধন্যবাদ atob। আমি কখনই সচেতন ছিলাম না!

— ইফেদী ওকনকভো

3

সাবধান - JSON এ ল্যাটিন অক্ষর না থাকলে কাজ করে না।

— রিলেক্সার

5

আপনি নকআউটজ ব্যবহার করতে পারেন,

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

knockout.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

আউটপুট

প্রথম নাম: জেইসন শেষ নাম: মন্টেরোসো

এটি দেখুন: http://learn.knockoutjs.com/

— jayM
সূত্র

2

কিছুই এখানে অভিনব। পিএইচপি থেকে, htmlspecialcharsকোনও বিশেষ অক্ষর এইচটিএমএল হিসাবে ব্যাখ্যা করা যায় না তা নিশ্চিত করার জন্য জেএসএন স্ট্রিংটি চালিয়ে যান। জাভাস্ক্রিপ্ট থেকে, কোনও পালানোর দরকার নেই; শুধু বৈশিষ্ট্য সেট করুন এবং আপনি যেতে ভাল।

— Matchu
সূত্র

2

সাধারণ JSON অবজেক্টের জন্য, নীচের কোডটি কাজ করবে।

এনকোড:

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

ডিকোড:

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);

— Crashalot
সূত্র

1

আপনি যা করতে পারেন তা হ'ল আপনার উপাদান / এর কাছাকাছি সিডিটা ব্যবহার করা

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>

যেখানে মাইডাটা হ'ল একটি কাঁচা জসন স্ট্রিং। আশা করি এটি আপনাকে এবং অন্যদের সহায়তা করে।

— Faiyet
সূত্র

এই সমাধানটি কীভাবে (পারে) কাজ করে? আমি যদি ">মাইডাটাতে এমন কিছু সঞ্চয় করতে চাই তবে কী হবে ?

— মার্টিন পেক্কা

1

স্ট্রিংটিতে "]]>" কী রয়েছে

— ডবস ভ্যান্ডারমিয়ার

1

ব্যবহার করা যেতে পারে এমন আরেকটি চিন্তাধারা হ'ল JSON ডেটাটি অ্যাট্রিবিউটে বেস 64 স্ট্রিং হিসাবে সংরক্ষণ করা এবং তারপরে ব্যবহার করা window.atobবা window.btoaএটি ব্যবহারযোগ্য JSON ডেটাতে পুনরুদ্ধার করা।

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>

— ম্যাথু ডি আউল্ড
সূত্র