feat(utils): 新增 htmlToDocumentFragment，htmlToElement

src/utils/__snapshots__/htmlToDom.test.ts.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`htmlToDom htmlToDocumentFragment 正常 1`] = `
+<DocumentFragment>
+  test
+</DocumentFragment>
+`;
+
+exports[`htmlToDom htmlToDocumentFragment 正常 2`] = `
+<DocumentFragment>
+  test 
+  <a>
+    hello
+  </a>
+</DocumentFragment>
+`;
+
+exports[`htmlToDom htmlToDocumentFragment 正常 3`] = `
+<DocumentFragment>
+  <a>
+    hello
+  </a>
+</DocumentFragment>
+`;
+
+exports[`htmlToDom htmlToDocumentFragment 正常 4`] = `"hello"`;
+
+exports[`htmlToDom htmlToElement 正常 1`] = `undefined`;
+
+exports[`htmlToDom htmlToElement 正常 2`] = `
+<a>
+  hello
+</a>
+`;
+
+exports[`htmlToDom htmlToElement 正常 3`] = `
+<a>
+  hello
+</a>
+`;

src/utils/htmlToDom.test.ts

@@ -0,0 +1,20 @@
+import { htmlToDocumentFragment, htmlToElement } from './htmlToDom'
+
+describe('htmlToDom', () => {
+  test('htmlToDocumentFragment 正常', () => {
+    expect(htmlToDocumentFragment('test')).toMatchSnapshot()
+    expect(htmlToDocumentFragment('test <a>hello</a>')).toMatchSnapshot()
+    expect(htmlToDocumentFragment('<a>hello</a>')).toMatchSnapshot()
+    expect(
+      htmlToDocumentFragment('<a>hello</a>')
+        .querySelector('a')
+        ?.textContent?.trim(),
+    ).toMatchSnapshot()
+  })
+
+  test('htmlToElement 正常', () => {
+    expect(htmlToElement('test')).toMatchSnapshot()
+    expect(htmlToElement('test <a>hello</a>')).toMatchSnapshot()
+    expect(htmlToElement('<a>hello</a>')).toMatchSnapshot()
+  })
+})

src/utils/htmlToDom.ts

@@ -0,0 +1,27 @@
+// https://github.com/fregante/doma/blob/master/index.ts
+
+/**
+ * 将 HTML 字符串转为 DocumentFragment。
+ *
+ * @param html HTML 字符串
+ */
+export function htmlToDocumentFragment(html: string): DocumentFragment {
+  if (html == null) {
+    return new DocumentFragment()
+  }
+
+  const template = document.createElement('template')
+  template.innerHTML = html
+  return template.content
+}
+
+/**
+ * 将 HTML 字符串转为 Element。
+ *
+ * @param html HTML 字符串
+ */
+export function htmlToElement<T extends Element = Element>(
+  html: string,
+): T | undefined {
+  return (htmlToDocumentFragment(html).firstElementChild as T) ?? undefined
+}

src/utils/index.ts

@@ -28,6 +28,7 @@ export * from './formatNumber'
 export * from './getCurrentScript'
 export * from './getEnvironment'
 export * from './getWechatPublicAccountQrcodeUrl'
+export * from './htmlToDom'
 export * from './ii'
 export * from './inAndroid'
 export * from './inBrowser'