需要为 xml 中的标签着色，显示在 textarea 中答案

【问题标题】：Need to color the tags in an xml, displayed in a textarea需要为 xml 中的标签着色，显示在 textarea 中
【发布时间】：2011-04-16 18:06:18
【问题描述】：

我需要为 XML 字符串中的标签着色，该字符串显示在 html 页面的文本区域中。

比如说，我有一个 xml 字符串存储在一个变量“xmldata”中。

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 函数，它可以为文本区域中显示的 xml 字符串中的标签着色。

请帮助我解决问题。

-Dinesh

【问题讨论】：

我学习了Element.value，请教如何突出显示 XML 标签 - 这不是问题。请阅读How to Ask。

标签： javascript

【解决方案1】：

由于您的文本区域的内容不是单独的 DOM 元素，我认为您不能单独设置它们的属性（因为它们没有单独的属性）。您可能会发现可以插入的富文本编辑器的一些变体。这可能会也可能不会违反您不想要外部 javascript 库的规定。

【讨论】：

【解决方案2】：

正如here 回复的那样，看看一个适用于大多数情况的自包含美化器，它可以很好地缩进长行并在需要时为输出着色。不过，我想如果您在 textarea 中需要它可能无济于事。

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

有关演示，请参阅https://jsfiddle.net/dkb0La16/

【讨论】：