Как извлечь только текст из файлов Markdown в Javascript

Question

Я создаю простую платформу для блогов, использующую Vue, которая подает файлы Markdown (* .md) для сообщений.На главной странице я хочу показать список опубликованных постов, а также предварительный просмотр первых 30 слов в каждом посте.Это функция, которую я пока показываю для предварительного просмотра (front-matter просто анализирует некоторые метаданные, которые есть у меня в верхней части файла, а postData просто содержит текст из файла Markdown):

import fm from "front-matter";

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

Проблема в том, что если у Markdown есть теги изображений или теги ссылок, то они отображаются, когда я просто хочу отобразить необработанный текст.Например, если это мой файл Markdown:

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

, тогда предварительный просмотр должен выглядеть следующим образом:

Here is a link in my file.

Есть ли какая-нибудь библиотека, которая позволит мне это сделать?

Answer 1

Возможно, есть более прямой путь, но здесь есть кое-что, что, кажется, работает.

https://github.com/showdownjs/showdown

Вот уценка к HTML-скрипту, который работает, затем используйте jQuery для извлеченияtext () из скрытого элемента.

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>