Table of Contents

概要

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

動作サンプル

ソース

XMLMaker.js

// 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

<!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>

リンク

JavaScript