A guide on extracting text content exclusively from Markdown files using Javascript

Question

A guide on extracting text content exclusively from Markdown files using Javascript

I've been working on a blogging platform with Vue that serves Markdown (*.md) files for posts. My goal is to display a list of published posts on the main page along with a preview of the first 30 words of each post. Currently, I have a function that utilizes front-matter to extract metadata from the file header and postData to retrieve the Markdown content:

import fm from "front-matter";

function postPreview() {
  var fmData = fm(postData).body;
  var words = fmData.split(" ");
  return words.slice(0, 30).join(" ");
}

The issue arises when images or links are included in the Markdown, as I only want to show the plain text. For instance, if the Markdown contains:

![alt-text...](link-to-some-picture) Here is a [link](link-to-some-website) in my file.

The preview should display as:

Here is a link in my file.

Do you know of any libraries that could help achieve this?

javascript vue.js markdown

Answer 1

Answer №1

If you're looking for a solution that works, this might be a bit indirect, but it gets the job done.

https://github.com/showdownjs/showdown

One way to convert markdown to HTML is by using a script like the one below. You can then use jQuery to extract the text() from a hidden element.

function MarkdownToHTML(input){
   var  converter = new showdown.Converter();
   var  html = converter.makeHtml(input);
  return html ;
}

function processMarkdown() {
  
  var markdownInput = $("#myInput").val();
  
  var htmlOutput = MarkdownToHTML(markdownInput);
  
  $("#resultTemp").html(htmlOutput);

  $("#resultArea").html($("#resultTemp").text());

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>

<button onclick="processMarkdown()">process</button>

<input id="myInput" style="width:500px;" type="text" value="![alt-text...](link-to-some-picture) Here is a [link](link-to-some-website) in my file." />
<div id="resultArea" style="padding:10px;"></div>
<div id="resultTemp" style="display:none"></div>

Answer 2

If you're looking for a solution that works, this might be a bit indirect, but it gets the job done.

https://github.com/showdownjs/showdown

One way to convert markdown to HTML is by using a script like the one below. You can then use jQuery to extract the text() from a hidden element.

function MarkdownToHTML(input){
   var  converter = new showdown.Converter();
   var  html = converter.makeHtml(input);
  return html ;
}

function processMarkdown() {
  
  var markdownInput = $("#myInput").val();
  
  var htmlOutput = MarkdownToHTML(markdownInput);
  
  $("#resultTemp").html(htmlOutput);

  $("#resultArea").html($("#resultTemp").text());

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>

<button onclick="processMarkdown()">process</button>

<input id="myInput" style="width:500px;" type="text" value="![alt-text...](link-to-some-picture) Here is a [link](link-to-some-website) in my file." />
<div id="resultArea" style="padding:10px;"></div>
<div id="resultTemp" style="display:none"></div>

A guide on extracting text content exclusively from Markdown files using Javascript

Answer №1

Similar questions

Is there a way to incorporate locales in calculations involving percentages?

In TypeScript, both 'module' and 'define' are nowhere to be found

Learning to control the JavaScript countdown clock pause and play functionality

Avoid triggering child states in ui-router

Obtaining user roles from server without using JWT tokens

What is the best way to retrieve the border-color inline style using jQuery?

Retrieving a subset of an array column in Sequelize: A comprehensive guide

Tips for recognizing when Vuetify's v-autocomplete has reached the final scrolled item

Transferring MongoDB information to a Jade template in an ExpressJS application

Firefox does not support event.dataTransfer.files for drag and drop operations

Issues encountered when trying to deploy Nuxt.js on GitHub Pages

I need to send information from my JavaScript code to my Flask server

Tips for creating a dynamic curved SVG path

Memory Match: Picture Edition

What is the best way to activate an event listener only after a button has been clicked?

VueJS - The application is unable to find the designated route

Discovering the specific element that was clicked from a collection of elements

Can you clarify the distinctions between @nuxtjs/google-gtag, @nuxtjs/gtm, @nuxtjs/google-analytics, and vue-gtag, and which one would be most suitable for GA4

What's preventing me from using just one comparison condition in TypeScript?

What is the best way to ensure the font size is responsive in Laravel's welcome.blaze.php file?