innerHTML unencodes < в атрибутах

Question

У меня есть документ HTML, который может содержать < и > в некоторых атрибутах. Я пытаюсь извлечь это и запустить его через XSLT, но ошибки XSLT-движка говорят мне, что < недопустим внутри атрибута.

Я сделал некоторые раскопки и обнаружил, что он правильно убежали в исходном документе, но при этом загружаются в DOM через innerHTML, то DOM является unencoding атрибутов. Странно, он делает это для < и >, но не некоторые другие, такие как &.

Вот простой пример:

var div = document.createElement('DIV'); 
 
div.innerHTML = '<div asdf="&lt;50" fdsa="&amp;50"></div>'; 
 
console.log(div.innerHTML)

Я предполагаю, что реализация DOM решила, что HTML атрибуты могут быть менее строгими, чем атрибуты XML, и что это «работает, как предназначена". Мой вопрос: могу ли я обойти это без написания какой-нибудь ужасной замены регулярных выражений?

Answer 1

То, что в итоге оказалось лучшим для меня, заключалось в том, чтобы удвоить их с помощью XSLT на входящем документе (и отменить это в исходящем документе).

Таким образом, < в атрибуте становится <. Спасибо @Abel за предложение.

Вот XSLT добавил я, в случае, если другие считают его полезным:

Первый шаблон для выполнения строки замены в XSLT 1.0. Если вы можете использовать XSLT 2.0, вы можете использовать встроенный в replace.

<xsl:template name="string-replace-all"> 
    <xsl:param name="text"/> 
    <xsl:param name="replace"/> 
    <xsl:param name="by"/> 
    <xsl:choose> 
     <xsl:when test="contains($text, $replace)"> 
      <xsl:value-of select="substring-before($text,$replace)"/> 
      <xsl:value-of select="$by"/> 
      <xsl:call-template name="string-replace-all"> 
       <xsl:with-param name="text" select="substring-after($text,$replace)"/> 
       <xsl:with-param name="replace" select="$replace"/> 
       <xsl:with-param name="by" select="$by"/> 
      </xsl:call-template> 
     </xsl:when> 
     <xsl:otherwise> 
      <xsl:value-of select="$text"/> 
     </xsl:otherwise> 
    </xsl:choose> 
</xsl:template> 

Далее следуют шаблон, который делает определенные замены, которые мне нужны:

<!-- xml -> html --> 
<xsl:template name="replace-html-codes"> 
    <xsl:param name="text"/> 
    <xsl:variable name="lt"> 
     <xsl:call-template name="string-replace-all"> 
      <xsl:with-param name="text" select="$text"/> 
      <xsl:with-param name="replace" select="'&lt;'"/> 
      <xsl:with-param name="by" select="'&amp;lt;'"/> 
     </xsl:call-template> 
    </xsl:variable> 
    <xsl:variable name="gt"> 
     <xsl:call-template name="string-replace-all"> 
      <xsl:with-param name="text" select="$lt"/> 
      <xsl:with-param name="replace" select="'&gt;'"/> 
      <xsl:with-param name="by" select="'&amp;gt;'"/> 
     </xsl:call-template> 
    </xsl:variable> 
    <xsl:value-of select="$gt"/> 
</xsl:template> 

<!-- html -> xml --> 
<xsl:template name="restore-html-codes"> 
    <xsl:param name="text"/> 
    <xsl:variable name="lt"> 
     <xsl:call-template name="string-replace-all"> 
      <xsl:with-param name="text" select="$text"/> 
      <xsl:with-param name="replace" select="'&amp;lt;'"/> 
      <xsl:with-param name="by" select="'&lt;'"/> 
     </xsl:call-template> 
    </xsl:variable> 
    <xsl:variable name="gt"> 
     <xsl:call-template name="string-replace-all"> 
      <xsl:with-param name="text" select="$lt"/> 
      <xsl:with-param name="replace" select="'&amp;gt;'"/> 
      <xsl:with-param name="by" select="'&gt;'"/> 
     </xsl:call-template> 
    </xsl:variable> 
    <xsl:value-of select="$gt"/> 
</xsl:template> 

XSLT в основном сквозной. Я просто вызвать соответствующий шаблон, когда атрибуты копирования:

<xsl:template match="@*"> 
    <xsl:attribute name="data-{local-name()}"> 
     <xsl:call-template name="replace-html-codes"> 
      <xsl:with-param name="text" select="."/> 
     </xsl:call-template> 
    </xsl:attribute> 
</xsl:template> 

<!-- copy all nodes --> 
<xsl:template match="node()"> 
    <xsl:copy> 
     <xsl:apply-templates select="@*|node()"/> 
    </xsl:copy> 
</xsl:template> 

Answer 2

Я не уверен, что это то, что вы ищете, но посмотрите.

var div1 = document.createElement('DIV'); 
var div2 = document.createElement('DIV'); 
div1.setAttribute('asdf','<50'); 
div1.setAttribute('fdsa','&50'); 
div2.appendChild(div1); 
console.log(div2.innerHTML.replace(/&/g, '&')); 

Answer 3

Попробуйте XMLSerializer:

var div = document.getElementById('d1'); 
 

 
var pre = document.createElement('pre'); 
 
pre.textContent = div.outerHTML; 
 
document.body.appendChild(pre); 
 

 
pre = document.createElement('pre'); 
 
pre.textContent = new XMLSerializer().serializeToString(div); 
 
document.body.appendChild(pre);

<div id="d1" data-foo="a &lt; b &amp;&amp; b &gt; c">This is a test</div>

Вы, возможно, потребуется адаптировать XSLT принять во внимание пространство имен XMLSerializer вставок XHTML (по крайней мере здесь, в тесте с Firefox).