I currently have some code that uses marked.js to transform one big markdown string (read from a .md file) into html for display on the browser. 'md' is the markdown string and calling 'marked(md)' translates it to html.
getContent(filePath)
.then(response => {
if (!response.ok) {
return Promise.reject(response);
}
return response.text().then(md => setContent(marked(md)));
})
.catch(e => Dialog.error('Page failed to load!', e));
}, [filePath]);
How can I (either using marked.js, or another solution) parse the markdown/html to get only the text values? Some sample Markdown below.
### HEADER TEXT
---
# Some Page Title
<a href="cafe" target="_blank">Go to Cafe Page</a>
<Cafe host>/portos/cafe
## Links
- ##### [Tacos](#cafe_tacos)
- ##### [Burritos](#cafe_burritos)
- ##### [Bebidas](#cafe_bebidas)
## Overview
This is the overview text for the page. I really like tacos and burritos.
[![Taco Tabs](some/path/to/images/hello.png 'Tacos')](some/path/to/images/hello.png)
## Dining <a name="dining"></a>
Dining is foo bar burrito taco mulita.
[![Cafe Overview](some/path/to/images/hello2.png 'Cafe Overview')](some/path/to/images/hello2.png)
The cafe has been open since 1661. It has lots of food.
It was declared the top 1 cafe of all time.
### How to order food
You can order food by ordering food.
<div class="alert alert-info">
<strong> Note: </strong> TACOS ARE AMAZING.
</div>
One way to do it is by parsing the HTML string with DOMParser API to turn your string into a Document
object and then walk through it with a TreeWalker object to get the textContent
of each Text
node in the HTML. The result should be an array of strings.
function parseTextFromMarkDown(mdString) {
const htmlString = marked(mdString);
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const walker = document.createTreeWalker(doc, NodeFilter.SHOW_TEXT);
const textList = [];
let currentNode = walker.currentNode;
while(currentNode) {
textList.push(currentNode.textContent);
currentNode = walker.nextNode();
}
return textList;
}