JSON을 html 속성으로 전달

Question

JSON을 HTML 속성으로 전달해야하는 문제가 발생합니다.

: 나는 JSON 문자열이 나는 HTML로 전달하고 { "파일 이름": "myFile.js", "내용" "var에 K를 = '나의 가치'"}

속성은 다음 '마르크는 이스케이프와 HTML 파서가 생각하는 원인이기 때문에 var k = 'My Value'이 속성 file-json의 값이 {"filename":"myFile.js","content":"var k =이 아닌 전체 문자열입니다

<ide file-json='{"filename":"myFile.js","content":"var k = 'My Value'"}'></ide> 

문제가 발생합니다. file-json 속성은 추가 처리를 위해 javascript를 통해 읽힐 예정입니다.

filename과 content의 json 키의 값은 모두 사용자가 생성하며 거의 모든 값을 가질 수 있습니다. file-json 속성 전체를 탈출 할 길은 없습니까?

이미 시도 것, 그 실패의 이유는 다음과 같습니다 : (실제 JSON 입력이 매우 클 수 있습니다.)

• 가 어떤 잘못된 인스턴스를 탈출 거대한 정규 표현식을 사용하여 json 파일. 이것은 두 가지 주요한 이유 때문이며, 처음에는 속도가 느린 것이지만 더 중요한 것은 "멍청한"해결책이며 종종 실수로 인해 추가 오류가 발생하고 데이터가 손상된다는 것입니다.

• 전체 json 구조를 base64/hex로 변환합니다. 이 인코딩 된 구조를 file-json; 그런 다음 자바 스크립트를 읽을 때 base64에서 json 문자열로 다시 변환합니다. 마지막으로 처리를 계속합니다. 지금까지 데이터 손상을 일으킬 수있는 유일한 솔루션이기 때문에 지금까지 내가 제시 한 최상의 솔루션입니다. 그러나 그것은 느리며 많은 수의 움직이는 부품으로 구성되어 유지 보수성과 확장성에 문제가 있습니다.

Answer 1

귀하의 JSON은 그렇게 간단한 JSON.stringify이 작업

var json = {"filename":"myFile.js","content":"var k = 'My Value'"} 
var stringified = JSON.stringify(json); 
// or whatever element identifier you have 
document.getElementById('foo').setAttribute('file-json', stringified) 

하지하고 정말 문자열 경우 어떻게해야 단순히 추가, 유효 JSON과 같은 JSON.parse()

var stringified = JSON.stringify(JSON.parse(json)); 

FIDDLE