Javascript сериализация CDATA с XMLSerializer - PullRequest
Новая
       19

Javascript сериализация CDATA с XMLSerializer

0 голосов
/ 09 октября 2018

Я пытаюсь найти кросс-браузерный способ сериализации документа SVG, содержащего CDATA.

Мой код хорошо работает в Chrome и Firefox, но в Internet Explorer CDATA сериализуется как текст, а не как раздел CDATA.,Вот моя реализация: 

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var xml = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
var cdata = xml.createCDATASection('Some data & some more');
svg.appendChild(cdata);
log("Node Type: " + cdata.nodeName)
log("SVG: " + new XMLSerializer().serializeToString(svg));


// Utility function for output
function log(s) {
  var output = document.getElementById('output');
  if (output) {
    output.innerHTML += new Option(s).innerHTML + '<br>';
  } else {
    console.log(s);
  }
} 
<div id="output"></div>

В Chrome и Firefox вывод XMLSerializer выглядит так, как ожидалось:
<svg xmlns="http://www.w3.org/2000/svg"><![CDATA[Some data & some more]]></svg>

Но в Internet Explorer CDATAзаписанный как простой текстовый узел:
<svg xmlns="http://www.w3.org/2000/svg">Some data &amp; some more</svg>

Я попытался добавить перенос данных раздела CDATA в "", но это не работает, потому что оно будет экранировано. Могу ли я что-нибудь сделать, чтобы Internet Explorer правильно записал раздел CDATA?

Примечание. Фрагмент не работает в Internet Explorer, если встроенв Stackoverflow, но работает как отдельный файл.

1 Ответ

0 голосов
/ 10 октября 2018

Я придумал хакерское решение, которое на самом деле не удовлетворяет, но оно работает.

Перед сериализацией данные cdata окружены маркером начала и конца (я использую __CDATA и CDATA__ и после сериализации регулярное выражение используется для замены маркеров (и необязательных открывающих и конечных тегов CDATA) открывающими и конечными тегами CDATA.

При желании можно использовать перехват браузера, чтобы обнаружить, если этот взломнеобходим вообще.

Вот модифицированный пример: 

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var xml = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
var cdata = xml.createCDATASection('Some data & some more');
// Add markers
cdata.data = "__CDATA" + cdata.data + "CDATA__";
svg.appendChild(cdata);
var svgStr = new XMLSerializer().serializeToString(svg);
// Replace markers (and already existing CDATA start and end tags)
svgStr = svgStr.replace(/(?:<\!\[CDATA\[)?__CDATA(.*?)CDATA__(?:\]\]>)?/g, '<![CDATA[$1]]>');

log("SVG: " + svgStr);



// Utility function for output
function log(s) {
  var output = document.getElementById('output');
  if (output) {
    output.innerHTML += new Option(s).innerHTML + '<br>';
  } else {
    console.log(s);
  }
} 
<div id="output"></div>
...