0
179
Visualizaçõesextraiga la primera etiqueta p y la primera etiqueta h1 con una marca común
Supongamos que tengo la siguiente rebaja
# Comman mark is **just great** You can try CommonMark here. This dingus is powered by [commonmark.js](https://github.com/commonmark/commonmark.js), the JavaScript reference implementation. ## Try CommonMark 1. item one 2. item two - sublist - sublist Quiero obtener la primera etiqueta h1 y la primera etiqueta p para que sean el título y la descripción de la publicación de manera receptiva.
No puedo usar la API del navegador porque se está ejecutando en el servidor Node
Para obtener la primera etiqueta h1 , utilicé commonmark.js .
document.getElementById('btn').addEventListener('click', function (e) { let parsed = reader.parse(md); let result = writer.render(parsed); let walker = parsed.walker(); let event, node; while ((event = walker.next())) { node = event.node; // h1 tags if (event.entering && node.type === 'heading' && node.level == 1) { console.log('h1', '--', node?.firstChild?.literal); } // p tags if (event.entering && node.type === 'text') { console.log('p', '--', node?.literal); } } });Para el descuento anterior, la salida que obtuve en la consola.
Puede ver que el primer h1 devuelto es Common mark is , pero en realidad debería ser # Comman mark is **just great**
Lo mismo para la etiqueta p, ¿cómo puedo resolver este problema?
Ver en vivo: https://stackblitz.com/edit/js-vegggl?file=index.js
2 Respostas
Responde à pergunta0
Dado que ya está en el mundo de Node.js , le sugiero que consulte los procesadores de comentarios y rebombo del colectivo unificado . Estos procesadores admiten el análisis de Markdown y HTML respectivamente a/desde árboles de sintaxis . Todos estos procesadores en el colectivo unificado admiten " complementos " personalizados y de terceros que le permiten inspeccionar y manipular los árboles de sintaxis intermediarios. Cosas poderosas. Un poco de una curva de aprendizaje sin embargo. Sin embargo, en algún momento, RegEx falla con lenguajes no regulares como markdown . Los árboles de sintaxis pueden salvar el día.
0
const regex = { title: /^#\s+.+/, heading: /^#+\s+.+/, custom: /\$\$\s*\w+/, ol: /\d+\.\s+.*/, ul: /\*\s+.*/, task: /\*\s+\[.]\s+.*/, blockQuote: /\>.*/, table: /\|.*/, image: /\!\[.+\]\(.+\).*/, url: /\[.+\]\(.+\).*/, codeBlock: /\`{3}\w+.*/, }; const isTitle = (str) => regex.title.test(str); const isHeading = (str) => regex.heading.test(str); const isCustom = (str) => regex.custom.test(str); const isOl = (str) => regex.ol.test(str); const isUl = (str) => regex.ul.test(str); const isTask = (str) => regex.task.test(str); const isBlockQuote = (str) => regex.blockQuote.test(str); const isImage = (str) => regex.image.test(str); const isUrl = (str) => regex.url.test(str); const isCodeBlock = (str) => regex.codeBlock.test(str); export function getMdTitle(md) { if (!md) return ""; let tokens = md.split("\n"); for (let i = 0; i < tokens.length; i++) { if (isTitle(tokens[i])) return tokens[i]; } return ""; } export function getMdDescription(md) { if (!md) return ""; let tokens = md.split("\n"); for (let i = 0; i < tokens.length; i++) { if ( isHeading(tokens[i]) || isCustom(tokens[i]) || isOl(tokens[i]) || isUl(tokens[i]) || isTask(tokens[i]) || isBlockQuote(tokens[i]) || isImage(tokens[i]) || isUrl(tokens[i]) || isCodeBlock(tokens[i]) ) continue; return tokens[i]; } return ""; }