How to capture specific line of textarea in JS?

Navigation
-1
  • I would like to know how to capture a specific line where there is a certain occurrence based on the result of a textarea.
  • The idea is to enable custom markup in the same sense as a markdown , but with custom markups.
  • For example, if my JS is expecting to convert a line beginning with "##" into a html html tag, what is the best way to identify the whole line (and only it) and close the tag at the end?
  • I would like to know the most agile way for the browser, only with Vanilla JS if possible, but I do not rule out using jquery and other frameworks if necessary.
asked by anonymous 15.01.2018 / 23:05

1 answer

2

What you want has several steps:

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

    • Example with jQuery and Regular Expressions: link

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

    // 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>

    ):

        
    16.01.2018 / 12:58
    Text formatting options for HTML / PHP Paste input value