How to capture textarea specific line in JS?

Question

• I’d like to know how to capture one specific line where there is certain occurrence based on the result of a textarea.
• The idea is to enable a personalized marking in the same sense as a markdown, but with custom markings.
• For example, if my JS is waiting to convert a line started by "## " into an HTML H2 tag, which is the best way to identify all the line(and only it) and close the tag at the end?
• I would like to know the most agile way pro browser, only with Vanilla JS if possible, but do not rule out the use of jquery and other frameworks if necessary.

Answer 1

What you want has several steps:

1. Fetch text entered in textarea, and turn it into a array, where each entry will correspond to a line of text in the textarea'.
2. Search the contents of the array to find, for example, a line started with ##.
3. Return the result in html (convert the line started with ## tag h2 valid.

Example with jQuery and Regular Expressions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

In this example tags are validated <h1> and <h2> and the remaining lines are converted into paragraphs <p>.

// Assegura que o documento html está totalmente carregado
$(document).ready(function() {
    
    // Clicando no botão executa a conversão  
    $('#botao-converter').click(function() {
      
      // Obtém o conteúdo do textarea e divide-o em linhas
      var arrayDeLinhas = $('#editor').val().split('\n');            
      
      var resultadoHTML = '';
      // Loop para validar e converter o conteúdo para html
      for (var i=0; i<arrayDeLinhas.length; i++) {
        var linha = arrayDeLinhas[i];
        var elementoEncontrado;
        // Expressões regulares para validar as linhas        
        var existeH1 = linha.match(/^#\s(.*)/);
        var existeH2 = linha.match(/^##\s(.*)/);
        
        if (existeH1) { elementoEncontrado = 'h1'; }
        if (existeH2) { elementoEncontrado = 'h2'; }
        
        switch(elementoEncontrado) {
          case 'h1':
            resultadoHTML+= '<h1>' + linha.replace(/^#(.*)/,'') + '</h1>';
            break;
          case 'h2':
            resultadoHTML+= '<h2>' + linha.replace(/^##(.*)/,'') + '</h2>';
            break;
          default:
            resultadoHTML+= '<p>' + linha + '</p>';
        }
          
      }                       
      
      // Mostra o resultado
      $('#resultado').html(resultadoHTML);
      
    });
        
});

body { font-family: monospace}

<h3>EDITOR:</h3>
<form>
<textarea id="editor" rows="8" cols="80">Texto
Texto e mais texto
Mais texto ainda
## H2 aqui
Mais texto
# H1 aqui
Texto simples  
</textarea>
  <br>
  <button id="botao-converter" type="button">Converter para Markdown</button>
</form>
<br>
<h3>RESULTADO:</h3>
<div id="resultado">O resultado irá surgir aqui</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

):