@whitesev/domutils 1.5.0 → 1.5.2

package/dist/types/src/DOMUtilsCommonUtils.d.ts

@@ -7,6 +7,10 @@ declare const DOMUtilsCommonUtils: {
      * @param element
      */
     isShow(element: HTMLElement): boolean;
+    /**
+     * 获取安全的html
+     */
+    getSafeHTML(text: string): any;
     /**
      * 在CSP策略下设置innerHTML
      * @param $el 元素

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/domutils",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "使用js重新对jQuery的部分函数进行了仿写",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/DOMUtils.ts

@@ -20,7 +20,7 @@ class DOMUtils extends DOMUtilsEvent {
 		super(option);
 	}
 	/** 版本号 */
-	version = "2025.3.2";
+	version = "2025.4.8";
 	/**
 	 * 获取元素的属性值
 	 * @param element 目标元素
@@ -280,36 +280,37 @@ class DOMUtils extends DOMUtilsEvent {
 			}
 			return;
 		}
+		let setStyleProperty = (
+			propertyName: string,
+			propertyValue: string | number
+		) => {
+			if (propertyValue === "string" && propertyValue.includes("!important")) {
+				propertyValue = propertyValue
+					.trim()
+					.replace(/!important$/gi, "")
+					.trim();
+				element.style.setProperty(propertyName, propertyValue, "important");
+			} else {
+				propertyValue = handlePixe(propertyName, propertyValue);
+				element.style.setProperty(propertyName, propertyValue);
+			}
+		};
 		if (typeof property === "string") {
 			if (value == null) {
 				return DOMUtilsContext.windowApi.globalThis
 					.getComputedStyle(element)
 					.getPropertyValue(property);
 			} else {
-				if (value === "string" && value.includes("!important")) {
-					element.style.setProperty(property, value, "important");
-				} else {
-					value = handlePixe(property, value);
-					element.style.setProperty(property, value);
-				}
+				setStyleProperty(property, value);
 			}
 		} else if (typeof property === "object") {
 			for (let prop in property) {
-				if (
-					typeof property[prop] === "string" &&
-					(property[prop] as string).includes("!important")
-				) {
-					element.style.setProperty(
-						prop,
-						property[prop] as string,
-						"important"
-					);
-				} else {
-					property[prop] = handlePixe(prop, property[prop] as string);
-					element.style.setProperty(prop, property[prop] as string);
-				}
+				let value = property[prop];
+				setStyleProperty(prop, value!);
 			}
 		} else {
+			// 其他情况
+			throw new TypeError("property must be string or object");
 		}
 	}
 	/**
@@ -867,7 +868,10 @@ class DOMUtils extends DOMUtilsEvent {
 		}
 		function elementAppendChild(ele: HTMLElement, text: HTMLElement | string) {
 			if (typeof content === "string") {
-				ele.insertAdjacentHTML("beforeend", text as string);
+				ele.insertAdjacentHTML(
+					"beforeend",
+					DOMUtilsCommonUtils.getSafeHTML(text as string)
+				);
 			} else {
 				ele.appendChild(text as HTMLElement);
 			}
@@ -912,7 +916,10 @@ class DOMUtils extends DOMUtilsEvent {
 			return;
 		}
 		if (typeof content === "string") {
-			element.insertAdjacentHTML("afterbegin", content);
+			element.insertAdjacentHTML(
+				"afterbegin",
+				DOMUtilsCommonUtils.getSafeHTML(content)
+			);
 		} else {
 			let $firstChild = element.firstChild;
 			if ($firstChild == null) {
@@ -947,7 +954,10 @@ class DOMUtils extends DOMUtilsEvent {
 			return;
 		}
 		if (typeof content === "string") {
-			element.insertAdjacentHTML("afterend", content);
+			element.insertAdjacentHTML(
+				"afterend",
+				DOMUtilsCommonUtils.getSafeHTML(content)
+			);
 		} else {
 			let $parent = element.parentElement;
 			let $nextSlibling = element.nextSibling;
@@ -984,7 +994,10 @@ class DOMUtils extends DOMUtilsEvent {
 			return;
 		}
 		if (typeof content === "string") {
-			element.insertAdjacentHTML("beforebegin", content);
+			element.insertAdjacentHTML(
+				"beforebegin",
+				DOMUtilsCommonUtils.getSafeHTML(content)
+			);
 		} else {
 			let $parent = element.parentElement;
 			if (!$parent) {

package/src/DOMUtilsCommonUtils.ts

@@ -14,6 +14,21 @@ const DOMUtilsCommonUtils = {
 	isShow(element: HTMLElement) {
 		return Boolean(element.getClientRects().length);
 	},
+	/**
+	 * 获取安全的html
+	 */
+	getSafeHTML(text: string) {
+		// @ts-ignore
+		if (globalThis.trustedTypes) {
+			// @ts-ignore
+			const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+				createHTML: (html: string) => html,
+			});
+			return policy.createHTML(text);
+		} else {
+			return text;
+		}
+	},
 	/**
 	 * 在CSP策略下设置innerHTML
 	 * @param $el 元素
@@ -21,20 +36,7 @@ const DOMUtilsCommonUtils = {
 	 */
 	setSafeHTML($el: HTMLElement, text: string) {
 		// 创建 TrustedHTML 策略（需 CSP 允许）
-		try {
-			$el.innerHTML = text;
-		} catch (error) {
-			// @ts-ignore
-			if (globalThis.trustedTypes) {
-				// @ts-ignore
-				const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
-					createHTML: (html: string) => html,
-				});
-				$el.innerHTML = policy.createHTML(text);
-			} else {
-				throw new Error("trustedTypes is not defined");
-			}
-		}
+		$el.innerHTML = this.getSafeHTML(text);
 	},
 	/**
 	 * 用于显示元素并获取它的高度宽度等其它属性