Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Exercise #4: HTML Link Parser

exercise status: released

Exercise details

In this exercise your goal is create a package that makes it easy to parse an HTML file and extract all of the links (<a href="">...</a> tags). For each extracted link you should return a data structure that includes both the href, as well as the text inside the link. Any HTML inside of the link can be stripped out, along with any extra whitespace including newlines, back-to-back spaces, etc.

Links will be nested in different HTML elements, and it is very possible that you will have to deal with HTML similar to code below.

<ahref="/dog"><span>Something in a span</span>
Text not in a span
<b>Bold text!</b></a>

In situations like these we want to get output that looks roughly like:

Link{
Href: "/dog",
Text: "Something in a span Text not in a span Bold text!",
}

Once you have a working program, try to write some tests for it to practice using the testing package in go.

Notes

1. Use the x/net/html package

I recommend checking out the x/net/html package for this task, which you will need to go get. It is provided by the Go team, but isn't included in the standard library. This makes it a little easier to parse HTML files.

2. Ignore nested links

You can ignore any links nested inside of another link. Eg with following HTML:

<ahref="#">
Something here <ahref="/dog">nested dog link</a></a>

It is okay if your code returns only the outside link.

3. Get something working before focusing on edge-cases

Don't worry about having perfect code. Chances are there will be a lot of edge cases here that will be kinda tricky to handle. Just try to cover the most basic use cases first and then improve on that.

4. A few HTML examples have been provided

I created a few simpler HTML files and included them in this repo to help with testing. They won't cover all potential use cases, but should help you start testing out your code.

5. The fourth example will help you remove comments from your link text

Chances are your first version will include the text from comments inside a link tag. Mine did. Use ex4.html to test that case out and fix the bug.

Hint: See NodeType constants and look for the types that you can ignore.

External Resources

In the solution for this exercise I end up using a DFS, which is a graph theory algorithm. If you want to learn a little more about that, I have discussed it on YouTube here - https://www.youtube.com/watch?v=zboCGDMnU3I

There is a complete series on algorithms and graph theory, though at this time it is somewhat incomplete. I never have enough time in the day 🙁. Hopefully one day Let's Learn Algorithms will be its own series like Gophercises.

Bonus

The only bonuses here are to improve your tests and edge-case coverage.

About

Ex 4 - HTML link parser

Resources

Stars

27 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages