XMLMaker

概要

  • 雛形となる XML の所定の位置に、属性/子要素を追加した XML を出力する。
  • 位置指定は、XPath で行う。
  • Windows 版の Opera12, Firefox15, Chrome21 で動作確認。
  • あれ? DOMParser を用意しても IE だと既存オブジェクトにメソッド追加できないぞ?
    オブジェクトでサポートされていないプロパティまたはメソッドです。

動作サンプル

ソース

XMLMaker.js

すべてを展開すべてを収束
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 
 
-
|
|
|
|
|
|
|
|
|
|
-
|
!
|
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!
|
|
-
|
-
|
|
-
|
-
|
!
!
|
-
|
|
-
|
|
-
|
!
!
|
!
|
|
-
|
|
|
|
|
|
|
// XMLMaker.js
/** XMLの所定の位置に値を追加する */
function makeXML(item1, item2, item3, item4) {
    var xmlDoc = addExMethods((new DOMParser()).parseFromString(baseXML(), "text/xml"));
 
    xmlDoc.setAttributeByXPath('//item1', 'name', item1);
    xmlDoc.setAttributeByXPath('//item2/param[1]', 'opt', item2);
    xmlDoc.addTextByXPath('//item3', item3);
    xmlDoc.addTextByXPath('//item4/param[@name="01"]', item4);
 
    var strXML = (new XMLSerializer()).serializeToString(xmlDoc);
    strXML = htmlEscape(strXML);
    /* インデントを可視化 */
    strXML = strXML.replace(/([\r\n])(\s+)(<)/g, function (whole, p1, p2, p3) {
        return p1 + p2.replace(/\s/g, ' ') + p3;
    }).replace(/[\r\n]+/g, '<br>');
    var docNew = window.open().document;
    docNew.open('text/html; charset="UTF-8"').write(strXML);
    docNew.close();
 
    /** XMLの雛形を戻す */
    function baseXML() {
        return [
            '<?xml version="1.0" encoding="UTF-8"?>',
            '<root>',
            '  <item1></item1>',
            '  <item2>',
            '    <param name="00" />',
            '    <param name="01" />',
            '  </item2>',
            '  <item3></item3>',
            '  <item4>',
            '    <param name="00" />',
            '    <param name="01" />',
            '    <param name="02" />',
            '  </item4>',
            '</root>',
        ].join('\n');
    }
 
    /** XPath で指定した位置に属性や要素を追加するメソッドを追加 */
    function addExMethods(obj) {
        /** 属性の追加/上書き */
        obj.setAttributeByXPath = function (xpath, attrName, text) {
            var nodeTmp = this.evaluate(xpath, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            var nodeTarget = nodeTmp.singleNodeValue;
            if (nodeTarget) {
                nodeTarget.setAttribute(attrName, text);
            } else {
                prompt('XPath is not valid', xpath);
            }
        };
        /** テキストノードを子要素として追加 */
        obj.addTextByXPath = function (xpath, text) {
            var nodeTmp = this.evaluate(xpath, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            var nodeTarget = nodeTmp.singleNodeValue;
            if (nodeTarget) {
                var nodeText = this.createTextNode(text);
                nodeTarget.appendChild(nodeText);
            } else {
                prompt('XPath is not valid', xpath);
            }
        };
        return obj;
    }
 
    /** HTMLタグを数値参照としてエスケープ */
    function htmlEscape(s) {
        return s.replace(/[&<>"']/g, function (m) {
			return '&#x' + m.charCodeAt(0).toString(16) + ';'
		});
	}
}
 
// EOF

XMLMaker.html

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="http://www.takeash.net/take.css">
<title>XML Maker</title>
</head>
<body>
<h1>XML Maker</h1>
<form id="form1" name="form1" action="#">
<table summary="Automation Engine Settings" border="1">
<tr><th>項目1</th><td><input id="item1" name="item1" type="text" value="項目1"></td></tr>
<tr><th>項目2</th><td><input id="item2" name="item2" type="text" value="項目2"></td></tr>
<tr><th>項目3</th><td><input id="item3" name="item3" type="text" value="項目3"></td></tr>
<tr><th>項目4</th><td><input id="item4" name="item4" type="text" value="項目4"></td></tr>
<tr><td colspan="2" align="center"><input type="button" value=" 作成 " onclick="makeXMLHelper();"></td></tr>
</table>
</form>
<script type="text/javascript" src="XMLMaker.js"></script>
<script type="text/javascript">
<!--
function makeXMLHelper(){
	makeXML(
		document.form1.item1.value,
		document.form1.item2.value,
		document.form1.item3.value,
		document.form1.item4.value
	);
}
// -->
</script>
</body>
</html>

添付ファイル: fileXMLMaker.zip 306件 [詳細]

リロード   新規 下位ページ作成 編集 凍結 差分 添付 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Thu, 20 Sep 2012 13:21:30 JST (2161d)