Extrator de Hierarquia de Favoritos

by Daniel Gualberto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
  <h1>Extrator de Hierarquia de Favoritos</h1>

  <div class="mb-3">
    <label for="bookmarksTextarea" class="form-label"
      >Cole aqui o HTML dos favoritos:</label
    >
    <textarea
      id="bookmarksTextarea"
      class="form-control"
      rows="3"
      placeholder="<!DOCTYPE NETSCAPE-Bookmark-file-1>..."
    ></textarea>
  </div>

  <div class="d-grid gap-2">
    <button id="processButton" class="btn btn-primary">
      Processar Favoritos
    </button>
  </div>

  <hr />

  <div id="hierarchyOutput"></div>
</div>

JavaScript

function extractBookmarkFolders(htmlContent) {
  // Create a DOM parser
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlContent, "text/html")

  // Function to recursively extract folder structure
  function extractFolders(element, depth = 0) {
    const folders = []

    // Select H3 elements (folder names)
    const folderElements = element.querySelectorAll(":scope > dt > h3")

    folderElements.forEach((folderEl) => {
      const folderName = folderEl.textContent.trim()
      const subFolderContainer = folderEl.nextElementSibling

      const folderInfo = {
        name: folderName,
        depth: depth,
        children: [],
      }

      // Recursively extract subfolders
      if (subFolderContainer && subFolderContainer.tagName === "DL") {
        folderInfo.children = extractFolders(subFolderContainer, depth + 1)
      }

      folders.push(folderInfo)
    })

    return folders
  }

  // Find the main bookmarks container
  const mainContainer = doc.querySelector("dl")

  return extractFolders(mainContainer)
}

// Render function to create HTML representation
function renderFolderHierarchy(folders) {
  const container = document.createElement("div")

  function createNestedList(folderList) {
    const ul = document.createElement("ul")
    ul.style.paddingLeft = "40px"

    folderList.forEach((folder) => {
      const li = document.createElement("li")
      li.textContent = folder.name

      if (folder.children.length > 0) {
        const subUl = createNestedList(folder.children)
        li.appendChild(subUl)
      }

      ul.appendChild(li)
    })

    return ul
  }

  container.appendChild(createNestedList(folders))
  return container
}

// Event Listener
document.addEventListener("DOMContentLoaded", () => {
  const textarea = document.getElementById("bookmarksTextarea")
  const processButton = document.getElementById("processButton")
  const outputContainer = document.getElementById("hierarchyOutput")

 ...