JS解析XML并抽取(可批量)

最新推荐文章于 2024-06-07 13:07:51 发布

KingFu28

最新推荐文章于 2024-06-07 13:07:51 发布

阅读量304

点赞数

文章标签： javascript xml 前端

本文链接：https://blog.csdn.net/kingwin28/article/details/128955454

版权

此HTML代码展示了一个JavaScript函数loadXML()，用于从textarea中读取XML数据并进行解析。函数使用DOMParser解析XML，提取特定节点信息，如id、name等，并将结果填充到不同的textarea中显示。主要关注的节点包括startEvent、userTask、endEvent和subProcess。

摘要由CSDN通过智能技术生成

根据需求从XML中抽取所需要的字段内容

XML数据源信息：

Html 代码如下：

<html>
<style>
	button {
		border-color: #dc1111;
		width: 80px;
		height: 30px;
		font-size: 18px;
	}
</style>
<body>
	<table>
		<tr>
			<td>
				<textarea id="xmlTest" rows="22" cols="216"></textarea>
			<td>
		</tr>
		<tr>
			<td>
				<span>解析结果：</span></br>
				<!--<div id="resultText"></div>-->
				<textarea id="resultText" rows="7" cols="216" disabled></textarea>
			<td>
		</tr>		
		<tr>
			<td><button onclick="loadXML()">xml解析</button></td>
		</tr>
	</table>
	<table>
		<tr>
			<td>BUSINESSPROCESSCODE：</td>
			<td>ACT_DEF_ID：</td>
			<td>NAME：</td>			
			<td>TYPE：</td>
			<td>IS_START：</td>
			<td>IS_END：</td>
		</tr>
		<tr>
			<td><textarea id="resultKey" rows="13" cols="50" disabled></textarea></td>
			<td><textarea id="resultId" rows="13" cols="50" disabled></textarea></td>
			<td><textarea id="resultName" rows="13" cols="50" disabled></textarea></td>	
			
			<td><textarea id="resultType" rows="13" cols="15" disabled></textarea></td>	
			<td><textarea id="resultIsStart" rows="13" cols="15" disabled></textarea></td>	
			<td><textarea id="resultIsEnd" rows="13" cols="15" disabled></textarea></td>	
		</tr>
	</table>
</body>
<script>
// 支持批量解析 by KingFu
function loadXML(){
		// 初始化
		document.getElementById("resultText").innerHTML = ''; 
		document.getElementById("resultKey").innerHTML = ''; 
		document.getElementById("resultId").innerHTML = ''; 
		document.getElementById("resultName").innerHTML = ''; 
		document.getElementById("resultType").innerHTML = ''; 
		document.getElementById("resultIsStart").innerHTML = ''; 
		document.getElementById("resultIsEnd").innerHTML = ''; 
		// 初始化 end.
		var xmlString = document.getElementById("xmlTest").value; 
        var xmlDoc=null;
		var endFlag = '</ext:definitions>'; // 长度 18
		var mainNode = 'process'; // 主节点
		var keyNode = 'startEvent,userTask,endEvent,subProcess'; // 需要的节点
		 
		var definitions = xmlString.split(endFlag); 
		var isParagraph = false; // 是否需要分段

		var resultText = '';
		var resultKey = '';
		var resultId = '';
		var resultName = '';
		var resultType = '';
		var resultIsStart = '';
		var resultIsEnd = '';

		for (var d=0; d<definitions.length; d++)
		{ 
			var xml = definitions[d];
			try{
				xml = xml.replaceAll('\n',''); // 很重要
				/* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
				 * 要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法
				 * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
				 * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意，不支持 "text/html"。
				 */
				domParser = new  DOMParser();
				xmlDoc = domParser.parseFromString(xml, 'text/xml');
				var nodes = xmlDoc.documentElement.childNodes;
				for (var i=0;i<nodes.length; i++ )
				{
					var node = nodes[i];
					if (node.nodeName == mainNode)
					{
						var id = node.id;						
						var childNodes = node.childNodes;
						
						for (var j=0;j<childNodes.length;j++)
						{
							var cNode = childNodes[j];
							// 抽取需要的节点
							if (keyNode.indexOf(cNode.nodeName) > -1)
							{
								console.log(cNode.id, cNode.nodeName, cNode.tagName, cNode.getAttribute('name'));
								// 子流程只记录用户任务
								if ('subProcess'==cNode.nodeName) {
									var subNodes = cNode.childNodes;
									for (var s=0;s<subNodes.length;s++ )
									{
										var subNode = subNodes[s];
										if ('userTask'==subNode.nodeName)
										{
											resultText += (id + ' = ' + subNode.id + ': ' + subNode.getAttribute('name') + '\n');
											resultKey += (id + '\n');
											resultId += (subNode.id  + '\n');
											resultName += (subNode.getAttribute('name')  + '\n');

											resultType += 0  + '\n';
											resultIsStart += 0  + '\n';
											resultIsEnd += 0  + '\n';
										}
									}

								} else {
									resultText += (id + ' = ' + cNode.id + ': ' + cNode.getAttribute('name') + '\n');

									resultKey += (id + '\n');
									resultId += (cNode.id  + '\n');
									resultName += (cNode.getAttribute('name')  + '\n');

									resultType += ('endEvent'==cNode.nodeName?3:0)  + '\n';
									resultIsStart += ('startEvent'==cNode.nodeName?1:0)  + '\n';
									resultIsEnd += ('endEvent'==cNode.nodeName?1:0)  + '\n';
								}								
							}							
						}						
					}					
				}
				
				if (isParagraph)
				{
					resultKey += '\n';
					resultId += '\n';
					resultName += '\n';
					resultType += '\n';
					resultIsStart += '\n';
					resultIsEnd += '\n';
				}
			}catch(e){
				console.log(e)
			}

		}

		document.getElementById("resultText").value = resultText;

		document.getElementById("resultKey").value = resultKey;
		document.getElementById("resultId").value = resultId;
		document.getElementById("resultName").value = resultName;
		document.getElementById("resultType").value = resultType;
		document.getElementById("resultIsStart").value = resultIsStart;
		document.getElementById("resultIsEnd").value = resultIsEnd;         

    }
</script>
</html>