split textarea lines that starts with “-” regex jquery

i am trying to split each textarea line that starts with “-” or “- ” or ” -” into individual span element with specific ID 1,2,3,4 etc..

The closest regex code i found is ^-.+ but it wont work for me like it works on:

https://regex101.com/r/yCOvyR/4

My current code is available also here: http://jsfiddle.net/ribosed/468emjct/59/

Thanks for any help.

$(document).ready(function() {
  $("#txt").keyup(function() {
    entered = $('#txt').val()
    lines = entered.split(/n/);

    spans = "";
    for (var i in lines) {
      spans += "<span style='color:red;'>- " + lines[i] + "</span><br/>";
    }

    $(".res").html(spans);
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
  padding: 10px;
}

.col {
  border: solid 1px #6c757d;
}

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
  <!-- Optional JavaScript; choose one of the two! -->
  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

  <div class="container">
    <div class="row">
      <div class="col-12">
        <form>
          <textarea id="txt" rows="5" cols="60" placeholder="Type something here..."></textarea>
        </form>
      </div>
      <div class="col-12 res"></div>
    </div>
  </div>
</body>

plit and match proces should be achieved while user type in textarea. I tried to use .keyup()

Answer

You’re not checking the Regex in your code, so it’s out of question to ask “why” it’s not working.

I think this should work:

$(document).ready(function() {
  const regex = /^s*-s*/;
  $("#txt").keyup(function() {
    const entered = $('#txt').val()
    const lines = entered.split(/n/);

    let spans = "";
    for (const line of lines) {
      if (regex.test(line)) {
        spans += "<span style='color:red;'>- " + line.replace(regex, '') + "</span><br/>";
      }
    }

    $(".res").html(spans);
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <form>
        <textarea id="txt" rows="5" cols="60" placeholder="Type something here..."></textarea>
      </form>
    </div>
    <div class="col-12 res"></div>
  </div>
</div>

Advertisement

Answer