Node.innerHTML gives lowercase tag names

Question

I repeat NodeList to get Node data, but when using Node.innerHTML I get the tag names in lowercase.

Actual tags

<Panel><Label>test</Label></Panel> 

as

 <Panel><Label>test</Label></Panel> 

I need these tags as is. Is it possible to get it with regex? I use it with dojo (is there a way in dojo?).

 var xhrArgs = { url: "./user/"+Runtime.userName+"/ws/workspace/"+Workbench.getProject()+"/lib/custom/"+(first.type).replace(".","/")+".html", content: {}, sync:true, load: function(data){ var test = domConstruct.toDom(data); dojo.forEach(dojo.query("[id]",test),function(node){ domAttr.remove(node,"id"); }); var childEle = ""; dojo.forEach(test.childNodes,function(node){ if(node.innerHTML){ childEle+=node.innerHTML; } }); command.add(new ModifyCommand(newWidget,{},childEle,context)); } }; 

Answer 1

You cannot count on .innerHTML to maintain the exact nature of your original HTML. In fact, in some browsers it differs significantly (although it gives the same results) with different quotes, case, order of attributes, etc.

It is much better not to rely on saving the case and tweaking your javascript to deal with an uncertain case.

Of course, you can use the regular expression for a case-insensitive search (the “i” flag denotes its search as case-insensitive), although it is usually much better to use direct access / DOM search rather than innerHTML search. You should tell us more about what exactly you are trying to do before we can offer some kind of code.

Answer 2

I would need to deal with the regex a bit, but you can use this:

  var str = '<panel><label>test</label></panel>'; chars = str.split(""); for (var i = 0; i < chars.length; i++) { if (chars[i] === '<' || chars[i] === '/') { chars[i + 1] = chars[i + 1].toUpperCase(); } } str = chars.join(""); 

jsFiddle

Hope this helps.

Answer 3

If you are trying to just smooth out the first character of the tag name, you can use:

 var s = 'panel'; s.replace(/(^.)(.*)/,function(m, a, b){return a.toUpperCase() + b.toLowerCase()}); // Panel 

Alternatively, you can use string manipulations (probably more efficient than regular expressions):

 s.charAt(0).toUpperCase() + s.substring(1).toLowerCase(); // Panel 

The above line prints any input line with the first character in upper case and all other lower case.

Answer 4

this is not fully tested and extremely inefficient, but in the console it worked quite quickly: (also, this is jquery, but it can be easily converted to pure javascript / DOM)

in jsFiddle

 function tagString (element) { return $(element). clone(). contents(). remove(). end()[0]. outerHTML. replace(/(^<\s*\w)|(<\/\s*\w(?=\w*\s*>$))/g, function (a) { return a. toUpperCase(); }). split(/(?=<\/\s*\w*\s*>$)/); } function capContents (element) { return $(element). contents(). map(function () { return this.nodeType === 3 ? $(this).text() : capitalizeHTML(this); }) } function capitalizeHTML (selector) { var e = $(selector).first(); var wrap = tagString(e); return wrap[0] + capContents(e).toArray().join("") + wrap[1]; } capitalizeHTML('body'); 

Also, besides a good exercise (in my opinion), do you really need to do this?