第一阶段，让标题和说明变成dom

multi.html

@@ -1167,13 +1167,7 @@ var formation = new Formation(teamsCount,5);
 		</div>
 
 		<template id="template-card-a">
-			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title="">
-				<div class="property" data-property=""></div>
-				<div class="subproperty" data-property=""></div>
-				<div class="id"></div>
-				<div class="awoken-count-num"></div>
-				<div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div>
-			</a>
+			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="property" data-property=""></div><div class="subproperty" data-property=""></div><div class="id"></div><div class="awoken-count-num"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
 		</template>
 	</div>
 	<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">

script-skill-parser.js

@@ -1447,7 +1447,7 @@ Array.prototype.nodeJoin = function(separator)
 	const frg = document.createDocumentFragment();
 	this.forEach((item, idx, arr)=>{
 		frg.ap(item);
-		if (idx < (arr.length - 1) && separator != null)
+		if (idx < (arr.length - 1) && separator !== undefined)
 			frg.ap(separator instanceof Node ? separator.cloneNode(true) : separator);
 	});
 	return frg;

script-universal_function.js

@@ -771,6 +771,15 @@ function cardN(id) {
 	changeid({ id: id }, monDom);
 	return monOuterDom;
 }
+//返回文字说明内怪物Card的纯HTML
+function cardNClick() {
+	const id = parseInt(this.getAttribute("data-cardid"), 10);
+	editBox.show();
+	editBox.mid = id;
+	editBoxChangeMonId(id);
+	//showSearch([id]);
+	return false;
+}
 //技能介绍里的头像的切换
 function changeToIdInSkillDetail(event) {
 	const settingBox = editBox.querySelector(".setting-box");
@@ -790,18 +799,89 @@ function searchCollab(event) {
 //将怪物的文字介绍解析为HTML
 function descriptionToHTML(str)
 {
+	function formatParse(arr, reg, subMatchCount, returnFunc){
+		//const subMatchCount = returnFunc.length;
+		return arr.flatMap(item=>{
+			if (typeof item == "string") {
+				const subArr = item.split(new RegExp(reg));
+				const newArr = [];
+				for (let i = 0; i < subArr.length; i += (subMatchCount+1)) {
+					newArr.push(subArr[i]);
+					if (subArr[i+subMatchCount] !== undefined) {
+						newArr.push(returnFunc(...[subArr.slice(i + 1, i + subMatchCount + 1)]));
+					}
+				}
+				return newArr;
+			} else {
+				return item;
+			}
+		});
+	}
+	let nodeArr = [str];
+	nodeArr = formatParse(nodeArr, /\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm, 2,
+		(color, content)=>{
+			const sp = document.createElement("span");
+			sp.style.color = `#${color}`;
+			sp.textContent = content;
+			return sp;
+		});
+	nodeArr = formatParse(nodeArr, /\%\{m([0-9]{1,4})\}/g, 1,
+		(id)=>{
+			const avatar = cardN(parseInt(id,10));
+			avatar.monDom.onclick = cardNClick;
+			return avatar;
+		});
+
+/*	arr = arr.flatMap(item=>{
+		if (typeof item == "string") {
+			const subArr = item.split(/\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm);
+			const newArr = [];
+			for (let i = 0; i < subArr.length; i += 3) {
+				newArr.push(subArr[i]);
+				if (subArr[i+2] !== undefined) {
+					const sp = document.createElement("span");
+					sp.style.color = `#${subArr[i+1]}`;
+					sp.textContent = subArr[i+2];
+					newArr.push(sp);
+				}
+			}
+			return newArr;
+		} else {
+			return item;
+		}
+	});
+
+	arr = arr.flatMap(item=>{
+		if (typeof item == "string") {
+			const subArr = item.split(/\%\{m([0-9]{1,4})\}/g);
+			const newArr = [];
+			for (let i = 0; i < subArr.length; i += 2) {
+				newArr.push(subArr[i]);
+				if (subArr[i+1] !== undefined) {
+					const avatar = cardN(parseInt(subArr[i+1],10));
+					avatar.monDom.onclick = cardNClick;
+					newArr.push(avatar);
+				}
+			}
+			return newArr;
+		} else {
+			return item;
+		}
+	});*/
+
 	//str = str.replace(/\n/ig,"<br>"); //换行
 	//str = str.replace(/ /ig,"&nbsp;"); //换行
 
-	str = str.replace(/\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm,'<span style="color:#$1;">$2</span>'); //文字颜色
-	str = str.replace(/\%\{m([0-9]{1,4})\}/g,function (str, p1, offset, s){return cardN(parseInt(p1,10)).outerHTML;}); //怪物头像
-	return str;
+	//str = str.replace(/\^([a-fA-F0-9]+?)\^([^\^]+?)\^p/igm,'<span style="color:#$1;">$2</span>'); //文字颜色
+	//str = str.replace(/\%\{m([0-9]{1,4})\}/g,function (str, p1, offset, s){return cardN(parseInt(p1,10)).outerHTML;}); //怪物头像
+	return nodeArr.nodeJoin();
 }
 //默认的技能解释的显示行为
 function parseSkillDescription(skill) {
-	const span = document.createElement("span");
-	span.innerHTML = descriptionToHTML(skill.description);
-	return span;
+	//const span = document.createElement("span");
+	//span.innerHTML = descriptionToHTML(skill.description);
+	
+	return descriptionToHTML(skill.description);
 }
 //大数字缩短长度，默认返回本地定义字符串
 function parseBigNumber(number) {

script.js

@@ -1973,7 +1973,9 @@ function initialize(event) {
 	const txtDetailDisplay = detailBox.querySelector(".detail-display");
 	txtTitle.onchange = function() {
 		formation.title = this.value;
-		txtTitleDisplay.innerHTML = descriptionToHTML(this.value);
+		//txtTitleDisplay.innerHTML = descriptionToHTML(this.value);
+		txtTitleDisplay.innerHTML = '';
+		txtTitleDisplay.appendChild(descriptionToHTML(this.value));
 		let titleStr = txtTitleDisplay.textContent.trim();
 		document.title = titleStr.length > 0 ? `${titleStr.trim()} - ${localTranslating.webpage_title}` : localTranslating.webpage_title;
 		creatNewUrl();
@@ -1984,7 +1986,9 @@ function initialize(event) {
 	};
 	txtDetail.onchange = function() {
 		formation.detail = this.value;
-		txtDetailDisplay.innerHTML = descriptionToHTML(this.value);
+		//txtDetailDisplay.innerHTML = descriptionToHTML(this.value);
+		txtDetailDisplay.innerHTML = '';
+		txtDetailDisplay.appendChild(descriptionToHTML(this.value));
 		creatNewUrl();
 	};
 	txtDetail.onblur = function() {
@@ -3165,7 +3169,7 @@ function initialize(event) {
 	const monEditAwokens = Array.from(monEditAwokensRow.querySelectorAll(".awoken-ul input[name='awoken-number']"));
 
 	function checkAwoken() {
-		const card = Cards[editBox.mid];
+		const card = Cards[editBox.mid ?? 0];
 		const value = parseInt(this.value, 10);
 		awokenCountLabel.setAttribute(dataAttrName, value);
 		toggleDomClassName(value > 0 && value == card.awakenings.length, "full-awoken", awokenCountLabel);
@@ -4152,10 +4156,14 @@ function refreshAll(formationData) {
 	txtDetail.value = formationData.detail || "";
 	const txtTitleDisplay = titleBox.querySelector(".title-display");
 	const txtDetailDisplay = detailBox.querySelector(".detail-display");
-	txtTitleDisplay.innerHTML = descriptionToHTML(txtTitle.value);
+	//txtTitleDisplay.innerHTML = descriptionToHTML(txtTitle.value);
+	txtTitleDisplay.innerHTML = '';
+	txtTitleDisplay.appendChild(descriptionToHTML(txtTitle.value));
 	let titleStr = txtTitleDisplay.textContent.trim();
 	document.title = titleStr.length > 0 ? `${titleStr.trim()} - ${localTranslating.webpage_title}` : localTranslating.webpage_title;
-	txtDetailDisplay.innerHTML = descriptionToHTML(txtDetail.value);
+	//txtDetailDisplay.innerHTML = descriptionToHTML(txtDetail.value);
+	txtDetailDisplay.innerHTML = '';
+	txtDetailDisplay.appendChild(descriptionToHTML(txtDetail.value));
 	
 	toggleDomClassName(!txtTitle.value.length, "edit", titleBox);
 	toggleDomClassName(!txtDetail.value.length, "edit", detailBox);

solo.html

@@ -1025,13 +1025,7 @@ var formation = new Formation(teamsCount,6);
 		</div>
 
 		<template id="template-card-a">
-			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title="">
-				<div class="property" data-property=""></div>
-				<div class="subproperty" data-property=""></div>
-				<div class="id"></div>
-				<div class="awoken-count-num"></div>
-				<div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div>
-			</a>
+			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="property" data-property=""></div><div class="subproperty" data-property=""></div><div class="id"></div><div class="awoken-count-num"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
 		</template>
 	</div>
 	<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">

triple.html

@@ -1966,13 +1966,7 @@ var formation = new Formation(teamsCount,6);
 		</div>
 
 		<template id="template-card-a">
-			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title="">
-				<div class="property" data-property=""></div>
-				<div class="subproperty" data-property=""></div>
-				<div class="id"></div>
-				<div class="awoken-count-num"></div>
-				<div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div>
-			</a>
+			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="property" data-property=""></div><div class="subproperty" data-property=""></div><div class="id"></div><div class="awoken-count-num"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
 		</template>
 	</div>
 	<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">