[23336] | 1 | /*
|
---|
| 2 | Written by Steve Tucker, 2006, http://www.stevetucker.co.uk
|
---|
| 3 | Full documentation can be found at http://www.stevetucker.co.uk/page-innerxhtml.php
|
---|
| 4 | Released under the Creative Commons Attribution-Share Alike 3.0 License, http://creativecommons.org/licenses/by-sa/3.0/
|
---|
| 5 |
|
---|
| 6 | Change Log
|
---|
| 7 | ----------
|
---|
| 8 | 15/10/2006 v0.3 innerXHTML official release.
|
---|
| 9 | 21/03/2007 v0.4 1. Third argument $appendage added (Steve Tucker & Stef Dawson, www.stefdawson.com)
|
---|
| 10 | 2. $source argument accepts string ID (Stef Dawson)
|
---|
| 11 | 3. IE6 'on' functions work (Stef Dawson & Steve Tucker)
|
---|
| 12 | */
|
---|
| 13 | innerXHTML = function($source,$string,$appendage) {
|
---|
| 14 | // (v0.4) Written 2006 by Steve Tucker, http://www.stevetucker.co.uk
|
---|
| 15 | if (typeof($source) == 'string') $source = document.getElementById($source);
|
---|
| 16 | if (!($source.nodeType == 1)) return false;
|
---|
| 17 | var $children = $source.childNodes;
|
---|
| 18 | var $xhtml = '';
|
---|
| 19 | if (!$string) {
|
---|
| 20 | for (var $i=0; $i<$children.length; $i++) {
|
---|
| 21 | if ($children[$i].nodeType == 3) {
|
---|
| 22 | var $text_content = $children[$i].nodeValue;
|
---|
| 23 | $text_content = $text_content.replace(/</g,'<');
|
---|
| 24 | $text_content = $text_content.replace(/>/g,'>');
|
---|
| 25 | $xhtml += $text_content;
|
---|
| 26 | }
|
---|
| 27 | else if ($children[$i].nodeType == 8) {
|
---|
| 28 | $xhtml += '<!--'+$children[$i].nodeValue+'-->';
|
---|
| 29 | }
|
---|
| 30 | else {
|
---|
| 31 | $xhtml += '<'+$children[$i].nodeName.toLowerCase();
|
---|
| 32 | var $attributes = $children[$i].attributes;
|
---|
| 33 | for (var $j=0; $j<$attributes.length; $j++) {
|
---|
| 34 | var $attName = $attributes[$j].nodeName.toLowerCase();
|
---|
| 35 | var $attValue = $attributes[$j].nodeValue;
|
---|
| 36 | if ($attName == 'style' && $children[$i].style.cssText) {
|
---|
| 37 | $xhtml += ' style="'+$children[$i].style.cssText.toLowerCase()+'"';
|
---|
| 38 | }
|
---|
| 39 | else if ($attValue && $attName != 'contenteditable') {
|
---|
| 40 | $xhtml += ' '+$attName+'="'+$attValue+'"';
|
---|
| 41 | }
|
---|
| 42 | }
|
---|
| 43 | $xhtml += '>'+innerXHTML($children[$i]);
|
---|
| 44 | $xhtml += '</'+$children[$i].nodeName.toLowerCase()+'>';
|
---|
| 45 | }
|
---|
| 46 | }
|
---|
| 47 | }
|
---|
| 48 | else {
|
---|
| 49 | if (!$appendage) {
|
---|
| 50 | while ($children.length>0) {
|
---|
| 51 | $source.removeChild($children[0]);
|
---|
| 52 | }
|
---|
| 53 | $appendage = false;
|
---|
| 54 | }
|
---|
| 55 | $xhtml = $string;
|
---|
| 56 | while ($string) {
|
---|
| 57 | var $returned = translateXHTML($string);
|
---|
| 58 | var $elements = $returned[0];
|
---|
| 59 | $string = $returned[1];
|
---|
| 60 | if ($elements) {
|
---|
| 61 | if (typeof($appendage) == 'string') $appendage = document.getElementById($appendage);
|
---|
| 62 | if (!($appendage.nodeType == 1)) $source.appendChild($elements);
|
---|
| 63 | else $source.insertBefore($elements,$appendage);
|
---|
| 64 | }
|
---|
| 65 | }
|
---|
| 66 | }
|
---|
| 67 | return $xhtml;
|
---|
| 68 | }
|
---|
| 69 | function translateXHTML($string) {
|
---|
| 70 | var $match = /^<\/[a-z0-9]{1,}>/i.test($string);
|
---|
| 71 | if ($match) {
|
---|
| 72 | var $return = Array;
|
---|
| 73 | $return[0] = false;
|
---|
| 74 | $return[1] = $string.replace(/^<\/[a-z0-9]{1,}>/i,'');
|
---|
| 75 | return $return;
|
---|
| 76 | }
|
---|
| 77 | $match = /^<[a-z]{1,}/i.test($string);
|
---|
| 78 | if ($match) {
|
---|
| 79 | $string = $string.replace(/^</,'');
|
---|
| 80 | var $element = $string.match(/[a-z0-9]{1,}/i);
|
---|
| 81 | if ($element) {
|
---|
| 82 | var $new_element = document.createElement($element[0]);
|
---|
| 83 | $string = $string.replace(/[a-z0-9]{1,}/i,'');
|
---|
| 84 | var $attribute = true;
|
---|
| 85 | while ($attribute) {
|
---|
| 86 | $string = $string.replace(/^\s{1,}/,'');
|
---|
| 87 | $attribute = $string.match(/^[a-z1-9_-]{1,}="[^"]{0,}"/i);
|
---|
| 88 | if ($attribute) {
|
---|
| 89 | $attribute = $attribute[0];
|
---|
| 90 | $string = $string.replace(/^[a-z1-9_-]{1,}="[^"]{0,}"/i,'');
|
---|
| 91 | var $attName = $attribute.match(/^[a-z1-9_-]{1,}/i);
|
---|
| 92 | $attribute = $attribute.replace(/^[a-z1-9_-]{1,}="/i,'');
|
---|
| 93 | $attribute = $attribute.replace(/;{0,1}"$/,'');
|
---|
| 94 | if ($attribute) {
|
---|
| 95 | var $attValue = $attribute;
|
---|
| 96 | if ($attName == 'value') $new_element.value = $attValue;
|
---|
| 97 | else if ($attName == 'class') $new_element.className = $attValue;
|
---|
| 98 | else if ($attName == 'style') {
|
---|
| 99 | var $style = $attValue.split(';');
|
---|
| 100 | for (var $i=0; $i<$style.length; $i++) {
|
---|
| 101 | var $this_style = $style[$i].split(':');
|
---|
| 102 | $this_style[0] = $this_style[0].toLowerCase().replace(/(^\s{0,})|(\s{0,1}$)/,'');
|
---|
| 103 | $this_style[1] = $this_style[1].toLowerCase().replace(/(^\s{0,})|(\s{0,1}$)/,'');
|
---|
| 104 | if (/-{1,}/g.test($this_style[0])) {
|
---|
| 105 | var $this_style_words = $this_style[0].split(/-/g);
|
---|
| 106 | $this_style[0] = '';
|
---|
| 107 | for (var $j=0; $j<$this_style_words.length; $j++) {
|
---|
| 108 | if ($j==0) {
|
---|
| 109 | $this_style[0] = $this_style_words[0];
|
---|
| 110 | continue;
|
---|
| 111 | }
|
---|
| 112 | var $first_letter = $this_style_words[$j].toUpperCase().match(/^[a-z]{1,1}/i);
|
---|
| 113 | $this_style[0] += $first_letter+$this_style_words[$j].replace(/^[a-z]{1,1}/,'');
|
---|
| 114 | }
|
---|
| 115 | }
|
---|
| 116 | $new_element.style[$this_style[0]] = $this_style[1];
|
---|
| 117 | }
|
---|
| 118 | }
|
---|
| 119 | else if (/^on/.test($attName)) $new_element[$attName] = function() { eval($attValue) };
|
---|
| 120 | else $new_element.setAttribute($attName,$attValue);
|
---|
| 121 | }
|
---|
| 122 | else $attribute = true;
|
---|
| 123 | }
|
---|
| 124 | }
|
---|
| 125 | $match = /^>/.test($string);
|
---|
| 126 | if ($match) {
|
---|
| 127 | $string = $string.replace(/^>/,'');
|
---|
| 128 | var $child = true;
|
---|
| 129 | while ($child) {
|
---|
| 130 | var $returned = translateXHTML($string,false);
|
---|
| 131 | $child = $returned[0];
|
---|
| 132 | if ($child) $new_element.appendChild($child);
|
---|
| 133 | $string = $returned[1];
|
---|
| 134 | }
|
---|
| 135 | }
|
---|
| 136 | $string = $string.replace(/^\/>/,'');
|
---|
| 137 | }
|
---|
| 138 | }
|
---|
| 139 | $match = /^[^<>]{1,}/i.test($string);
|
---|
| 140 | if ($match && !$new_element) {
|
---|
| 141 | var $text_content = $string.match(/^[^<>]{1,}/i)[0];
|
---|
| 142 | $text_content = $text_content.replace(/</g,'<');
|
---|
| 143 | $text_content = $text_content.replace(/>/g,'>');
|
---|
| 144 | var $new_element = document.createTextNode($text_content);
|
---|
| 145 | $string = $string.replace(/^[^<>]{1,}/i,'');
|
---|
| 146 | }
|
---|
| 147 | $match = /^<!--[^<>]{1,}-->/i.test($string);
|
---|
| 148 | if ($match && !$new_element) {
|
---|
| 149 | if (document.createComment) {
|
---|
| 150 | $string = $string.replace(/^<!--/i,'');
|
---|
| 151 | var $text_content = $string.match(/^[^<>]{0,}-->{1,}/i);
|
---|
| 152 | $text_content = $text_content[0].replace(/-->{1,1}$/,'');
|
---|
| 153 | var $new_element = document.createComment($text_content);
|
---|
| 154 | $string = $string.replace(/^[^<>]{1,}-->/i,'');
|
---|
| 155 | }
|
---|
| 156 | else $string = $string.replace(/^<!--[^<>]{1,}-->/i,'');
|
---|
| 157 | }
|
---|
| 158 | var $return = Array;
|
---|
| 159 | $return[0] = $new_element;
|
---|
| 160 | $return[1] = $string;
|
---|
| 161 | return $return;
|
---|
| 162 | }
|
---|