Обработка тегов HTML в XSL

Question

Прежде чем я объясню проблему, с которой я столкнулся, мне, вероятно, нужно сначала объяснить проблему, которую я хотел решить. :)

У меня есть XML, который будет отформатирован с помощью XSL. Этот XML содержит теги HTML в CDATA, например: -

<doc>
    <![CDATA[
        <b>Hello!</b>
    ]]>
</doc>

Когда XSL выполняет преобразование, браузер отображает <b>Hello!</b> вместо отображения слова Hello! жирным шрифтом. Я проверил исходный код, и он выглядит так: -

<doc>
    &lt;b&gt;Hello!&lt;/b&gt;
</doc>

Чтобы решить эту проблему, я думаю об использовании JQuery для отображения текста в виде HTML, например: -

$(document).ready(function(){
    var obj = $(".content");
    alert("text: " + obj.text()); // to test if JQuery works
    obj.html(obj.text());
});

Итак, я попытался добавить библиотеку JQuery в XSL, и после пары попыток и прочтения о проблеме с тегом <script> кажется, что мне нужно добавить пустышку между открывающим и закрывающим тегом <script>, например это: -

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
    <xsl:comment/>
</script>

Отображаемое отображение показывает 2 ошибки в Firebug: -

b.style is undefined
(function(a,b){function ci(a){return d...a:a+"px")}}),a.jQuery=a.$=d})(window);

$ is not defined

... и приведенные выше операторы javascript вообще не работают, даже не выводит предупреждение.

Я решил понизить JQuery с 1.5.2 до 1.3.2, чтобы посмотреть, исправит ли это что-нибудь. Теперь я получаю эту ошибку от Firebug: -

K.style is undefined
(function(){var R=/((?:\((?:\([^()]+\)...,typeof K==="string"?K:K+"px")}})})();

Хорошая новость в том, что я получаю предупреждение с JQuery 1.3.2. Плохая новость: obj.html(obj.text()); ничего не делает.

Просто из любопытства я изменяю obj.html(obj.text()); на obj.text("Just Testing: " + obj.text());, что является глупым тестом, но он работает ... Я вижу, как Just Testing: вставляется в реальный контент.

Как мне заставить obj.html(obj.text()); работать здесь? Или более общий вопрос: как получить HTML-теги из CData для отображения в виде HTML, а не в виде текста?

Большое спасибо.

UPDATE

Я сделал еще один тест ... obj.html("aaa"); тоже не работает. Я начинаю верить, что это как-то связано с XSL-преобразованием, которое мешает правильной работе JQuery. Я все еще использую 1.3.2 здесь.

Answer 1

Вместо :

<doc>     
  <![CDATA[         
     <b>Hello!</b>     
    ]]> 
</doc> 

Использование :

<doc>     
  <b>Hello!</b>     
 </doc> 

Размещение разметки внутри раздела CDATA эффективно разрушаетэта разметка и преобразование ее просто в строку - это уменьшает ее размерность с 2 до 1.

Очень плохая практика, которую следует избегать!

Answer 2

После суеты, я думаю, я наконец нашел решение своей проблемы. Я решил не использовать JQuery, потому что ошибки Firebug действительно меня беспокоят.

Я включил эту getElementsByClassName() функцию из Как получитьElementByClass вместо GetElementById с Javascript? в мое решение. Я создал свой собственный JS под названием "xml.js": -

xml.js

function getElementsByClassName(node,classname) {
    if (node.getElementsByClassName) { // use native implementation if available
        return node.getElementsByClassName(classname);
    } 
    else {
        return (function getElementsByClass(searchClass,node) {
            if (node == null) {
                node = document;
            }
            var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

            for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                    classElements[j] = els[i];
                    j++;
                }
            }
            return classElements;
        })(classname, node);
    }
}

window.onload=function() {
    var elements = getElementsByClassName(document, "html");

    for (var i = 0; i < elements.length; i++) {
         var e = elements[i];
         e.innerHTML = e.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
    }
};

XSL

Я добавил эту ссылку JS в XSL: -

<script type="text/javascript" src="xml.js"><xsl:comment/></script>

Я в основном добавил class="html" к тегам, которые требуют форматирования HTML, например: -

<p class="html">
    <xsl:call-template name="getDoc" />
</p>

XML

В моем XML есть куча разметок: -

<doc>     
  <![CDATA[         
     <b>Hello!</b> this is a <i>test</i>. 
      Email me at <a href="mailto:cow@dung.com">Moo</a>.
    ]]> 
</doc> 

Кажется, что HTML в CDATA правильно отображается в браузере.

UPDATE

Просто примечание, я также попытался удалить CDATA и выйти <и>: -

<doc>     
     &lt;b&gt;Hello!&lt;/b&gt; this is a &lt;i&gt;test&lt;/i&gt;. 
      Email me at &lt;a href="mailto:cow@dung.com"&gt;Moo&lt;/a&gt;.
</doc> 

Затем я делаю следующее: -

<xsl:value-of select="..." disable-output-escaping="yes" />

... и вот результат: -

• IE 8: работает, отображается правильно.
• Chrome 9: работает, отображается правильно
• Safari 5: работает, отображается правильно
• Firefox 4: не работает - вместо жирного слова отображается тег.

Кажется, что каждый браузер обрабатывает рендеринг по-своему ... довольно разочарован FF4 ... ба.

По крайней мере, сейчас я буду придерживаться решения javascript, пока не найду лучшее.

Answer 3

Вы пытались сначала получить текст из obj в переменную, а затем использовать переменную?

var objText = obj.text();
obj.html(objText);

Просто быстрое предложение, просто подумал, что я спрошу.