-1

在 HTML 页面中显示 XML 代码可能很困难。XML 标记将被识别为 HTML 标记，因此它们不会按应有的方式显示。转义尖括号 <> 有效，但随后 xml 代码将全部显示为黑色，难以阅读。有没有办法在 HTML 页面中对 XML 代码进行样式化，就像我在 XML 编辑器中阅读它一样？

4

1 回答 1

1

这是我将样式更改为 xml-key-words的javascript函数！（不幸的是它不缩进 xml）它接受纯 XML 文本作为输入，并返回 HTML 样式的代码，其中 xml 作为文本，在编辑器中用不同的颜色为 XML 关键字着色。

function stylizeXML(xml)
{
    xml = xml.replace(/>/g,"&gt");
    xml = xml.replace(/</g,"&lt");
    xml = xml.replace(/\&gt\&lt/g, "&gt <br> &lt");  //  ><   becomes   > <br> <


   var greens=xml.match(/<(\S+\s+)+[\S]+\=\"[^>]+>/g); //  ...=
    for (i=0; i<greens.length; i++)
        {
         greens=xml.match(/\s+\S+\=\"/g);
         for (i=0; i<greens.length; i++)
            {
             green = greens[i];
             green = green.replace(/\=\"/g, '=</span>"');
             attributes = green.match(/\s+\S+\=<\/span>\"/g);
                     for(j=0; j<attributes.length; j++)
                           {
                            attribute2 = "<span class='color_green'>"+attributes[j];
                            green = green.replace(attributes[j], attribute2);
                           }
             xml = xml.replace(greens[i],  green);
            }

        }


    var blues=xml.match(/\&lt(.*?)\&gt/g); // < ... >
    for (i=0; i<blues.length; i++)
        {
         blue = blues[i];
         blue = blue.replace("&lt/","");
         blue = blue.replace("&lt","");
         blue = blue.replace("&gt","");
         if (blues[i].match(/^\&lt\//))
             //   </ ... >
             {xml = xml.replace(blues[i],      "<span class='color_orange'>&lt/</span><span class='color_blue'>"+blue+"</span><span class='color_orange'>&gt</span>");} // </
         else
             //   < ... >
             {xml = xml.replace(blues[i],      "<span class='color_orange'>&lt</span><span class='color_blue'>"+blue+"</span><span class='color_orange'>&gt</span>");}  

        }

    var reds=xml.match(/\=<\/span>(\s*)\"(.*?)\"/g); //  ="..."
    for (i=0; i<reds.length; i++)
        {
         red = reds[i];
         red = red.replace("=</span>","");
         xml = xml.replace(reds[i], "=</span><span class='color_red'>"+red+"</span>");
        }


    return xml;

}

这是相关的CSS：

<style type="text/css">
.color_orange
    {color :rgb(255,96,24);}

.color_blue
    {color :blue;}

.color_red
    {color :rgb(234, 49, 176);}

.color_green    
     {color : rgb(72,150,163);}
</style>
于 2013-10-24T13:55:22.647 回答