JS 转换 HTML 结构?

Question

现在有一个这样的列表

<ul id="root">
  <li>
    123
    <ul>
        <li>
            123-1
        </li>
        <li>
            123-2
            <ul>
                <li>
                    123-2-1
                </li>
                <li>
                    123-2-2
                </li>
                <li>
                    123-2-3
                </li>
            </ul>
        </li>
        <li>
            123-3
        </li>
    </ul>
  </li>
</ul>

需要使用js或jquery, 转成如下结构

<ul id="root">
  <li>
    <a>123</a>
    <ul>
        <li>
            <a>123-1</a>
        </li>
        <li>
            <a>123-2</a>
            <ul>
                <li>
                    <a>123-2-1</a>
                </li>
                <li>
                    <a>123-2-2</a>
                </li>
                <li>
                    <a>123-2-3</a>
                </li>
            </ul>
        </li>
        <li>
            <a>123-3</a>
        </li>
    </ul>
  </li>
</ul>

Answer 1

原生 JS 写了一段，只要将文本节点找到，使用 replaceChild() 替换为 <a> 即可。

const root = document.querySelector("#root");
const dfs = (root) => {
    // 扫描元素下所有的子节点
    for (const node of root.childNodes) {
        // 确定子节点为文本节点类型，且内容不为空
        if (node.nodeType === 3 && node.textContent.trim().length !== 0) {
            // 创建标签，接受内容，并替换节点
            const a = document.createElement("a");
            a.href = "#";
            a.text = node.textContent.trim();
            root.replaceChild(a, node)
        } else {
            // 非文本节点，递归替换
            dfs(node);
        }
    }
};
dfs(root);

Answer 2

temp2 就是每一个 #text 文本节点。可以 childNodes 拿

el=document.createElement('a')
temp2.replaceWith(el)
el.appendChild(temp2)