@jcottam/html-metadata
Version:
This JavaScript library simplifies the extraction of HTML Meta and OpenGraph tags from HTML content or URLs.
60 lines (53 loc) • 1.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container max-w-lg mx-auto my-8">
<h1 class="text-2xl mb-4">HTML Metadata Demonstration</h1>
<h2 class="text-lg font-semibold mt-4 mb-1">HTML string</h2>
<textarea
class="w-full border p-2 bg-gray-700 text-gray-200 text-sm"
rows="15"
id="txtArea"
>
<html>
<head>
<meta property='title' content='My Amazing Website' />
<link rel="icon" href="https://example.com/favicon.ico" />
<meta property='og:title' content='My Amazing Website' />
<meta property='og:description' content='This is a brief description of my amazing website.' />
<meta property='og:image' content='https://example.com/image.jpg' />
<meta property='og:url' content='https://example.com' />
<meta property='og:type' content='website' />
</head>
</html>
</textarea
>
<h2 class="text-lg font-semibold mt-4 mb-1">extractFromHTML</h2>
<pre
id="extractedValue"
class="bg-gray-700 text-xs p-3 text-gray-200 text-wrap"
></pre>
</div>
<!-- script -->
<script type="module">
import { extractFromHTML } from "../dist/index.esm.js"
const extractMeta = () => {
const html = document.getElementById("txtArea").value
const extractedValue = extractFromHTML(html)
document.getElementById("extractedValue").innerText = JSON.stringify(
extractedValue,
null,
2
)
}
document.getElementById("txtArea").addEventListener("input", extractMeta)
extractMeta()
</script>
</body>
</html>