Question

我需要为XML字符串中的标记着色，该字符串显示在html页面的textarea中。

例如，假设我有一个存储在变量'xmldata'中的xml字符串。

html中的textarea标签如下所示

<textarea id="xmlfile" cols="20" rows="30"></textarea>

使用下面的javascript语句，我在textarea中显示xml字符串

document.getElementById("xmlfile").value=xmldata;

但是xml字符串在textarea中显示为纯文本。

是否有任何javascript函数可以为xml中的标记着色？

我不希望任何外部javascript和css代码像“google-code-prettify”一样工作

我需要的只是一个简单的javascript函数，它会在textarea中显示的xml字符串中为标记着色。

请帮我解决一下。

-Dinesh

Answer 1

由于文本区域的内容不是单独的DOM元素，我不相信您可以单独设置其属性（因为它们没有单独的属性）。您可能会在可以插入的富文本编辑器中找到一些变体。这可能会也可能不会违反您不希望使用外部JavaScript库的规定。

Answer 2

如回答 here 所示，看看一个适用于大多数情况的自包含修饰符对长行进行很好的缩进，并在需要时为输出着色。

function formatXml(xml,colorize,indent) { 
  function esc(s){return s.replace(/[-\/&<> ]/g,function(c){          // Escape special chars
    return c==' '?'&nbsp;':'&#'+c.charCodeAt(0)+';';});}            
  var sm='<div id="xmt">',se='<div id="xel">',sd='<div id="xdt">',
      sa='<div id="xat">',tb='<div id="xtb">',tc='<div id="xtc">',
      id=indent||'  ',sz=tz='</div>',re=is='',ib,ob,at,i;
  if (!colorize) sm=se=sd=sa=sz='';   
  xml.slice(1,-1).split(/>\s*</).forEach(function(nd){
    ob=('<'+nd+'>').match(/^(<[!?\/]?)(.*?)([?\/]?>)$/);              // Split outer brackets
    ib=ob[2].match(/^(.*?)>(.*)<\/(.*)$/)||['',ob[2],''];             // Split inner brackets 
    at=ib[1].match(/^--.*--$|=|('|").*?\1|[^\t\n\f \/>"'=]+/g)||['']; // Split attributes
    if (ob[1]=='</') is=is.substring(id.length);                      // Decrease indent
    re+=tb+tc+esc(is)+tz+tc+sm+esc(ob[1])+sz+se+esc(at[0])+sz;
    for (i=1;i<at.length;i++) re+=(at[i]=="="?sm+"="+sz+sd+esc(at[++i]):sa+' '+at[i])+sz;
    re+=ib[2]?sm+esc('>')+sz+sd+esc(ib[2])+sz+sm+esc('</')+sz+se+ib[3]+sz:'';
    re+=sm+esc(ob[3])+sz+tz+tz;
    if (ob[1]+ob[3]+ib[2]=='<>') is+=id;                              // Increase indent
  });
  return re;
}

演示见https://jsfiddle.net/3n0cazL8/

需要为xml中的标记着色，显示在textarea中

2 个答案: