innerHTML unencodes < öznitelikleri

Question

Bazı özelliklerde < ve > olabilecek bir HTML belgesine sahibim. Bunu ayıklamak ve bir XSLT aracılığıyla çalıştırmak için çalışıyorum, ancak < bir öznitelik içinde geçerli olmadığını söyleyen XSLT motor hataları.

biraz araştırma yaptık ve düzgün kaynak belgede kaçan olduğunu bulundu, ancak bu innerHTML aracılığıyla DOM yüklenir, DOM unencoding nitelikleri olduğunu. Garip bir şekilde, bu < ve > için yapar, ancak & gibi diğerleri değil. İşte

basit bir örnek:

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

DOM uygulaması HTML, XML öznitelikleri daha az sıkı olabilir niteliklerini olduğuna karar olduğunu farz ediyorum ve bu o "gibi çalıştığını "niyetindeydi. Sorum şu ki, korkunç bir regex değişimi yazmadan bu konuda çalışabilir miyim?

Answer 1

Benim için en iyi şekilde sonuçlanan şey, gelen belgede bir XSLT kullanarak bunları iki kez atmaktı (ve bunu giden belgede tersine çevirmek). Bir öznede <<

. Öneri için @Abel teşekkürler.

İlk XSLT'de 1.0 dize yedek yapmak için bir şablon: Burada

durumda diğerleri yararlı buluyorum, ben ekledi XSLT olduğunu. XSLT 2.0'ı kullanabiliyorsanız, bunun yerine yerleşik replace'u kullanabilirsiniz.

<!-- 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 çoğunlukla bir geçiş olup:

<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> 

Sonraki I gereken özel değiştirmeler yapar şablon bulunmaktadır. kopyalama özelliklerini zaman sadece uygun şablonu çağrı:

<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

Bu sizin aradığınız şey olup olmadığından emin değiliz.

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 deneyin:

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>

Sen (en azından burada Firefox ile bir testte) XHTML ad XMLSerializer ekler göz önünde XSLT'yi adapte gerekebilir.