How to extract only text from Markdown files in Javascript

Question

I'm creating a simple blogging platform using Vue that serves up Markdown (*.md) files for the posts. On the main page, I want to show a list of the published posts as well as a preview of the first 30 words in each post. This is the function I have so far to show the preview (front-matter just parses out some meta data I have at the top of of the file, and postData just contains the text from the Markdown file):

import fm from "front-matter";

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

The problem is, if the Markdown has image tags or link tags, then it displays those when I just want to display the raw text. For example, if this is my Markdown file:

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

Then the preview should just look like this:

Here is a link in my file.

Is there some library that will let me do this?

Reading the description of the front-matter package, it looks like it is for YAML, not markdown. Asking for recommendations for packages is off-topic. Pick a markdown parser, try to use it, and come back with attempt at that. — zero298
– zero298, Commented Mar 6, 2019 at 21:53

jeffld · Accepted Answer · 2019-03-07 14:46:23Z

There is probably a more direct way, but here is something that seems to work.

https://github.com/showdownjs/showdown

Here is a markdown to HTML script that works, then use jQuery to extract text() from the hidden element.

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

function fnProcess() {
  
  var sMarkDown = $("#myInput").val();
  
  var sHTML = Markdown2HTML(sMarkDown);
  
  $("#resultTemp").html(sHTML);

  $("#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="fnProcess()">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>

Collectives™ on Stack Overflow

How to extract only text from Markdown files in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related