What is a promise in Javascript?

Question

JuankGlezz

Asked: 2020-11-24 15:51:52 +0800 CST 2020-11-24 15:51:52 +0800 CST 2020-11-24 15:51:52 +0800 CST

Replace the last match of a text using regex

772

I have a problem when I want to replace the last match one expresión regularby one textarea, I explain:

If I write @in textareait, a menu opens where there are user names when selecting it, it auto-completes with the selected name.
But if I write again @and select another user, replaceit is done in the first @.
If I write @aand select a user, and I write again @aand select another user, it is correctly replaced in the last match.

How can I solve the second point?

var arrobaGato = "";
var $textarea = $('textarea');
var $btndropdown = $('.dropdown button');
/*Detectamos @, # o espacio*/
$textarea.on('keypress', function (evt) {
  if (evt.which == 64 || evt.which == 35) {
    arrobaGato = String.fromCharCode(evt.which);
    $btndropdown.dropdown('toggle');
  } else if (evt.which == 32) {
    arrobaGato = "";
    $('.dropdown.open').removeClass('open');
  }else if(arrobaGato != "" && !$('.dropdown').hasClass('open')){
    $btndropdown.dropdown('toggle');
  }
});
/*obtenemos el nombre seleccionado del menu*/
$('.dropdown li a').on('click', function(evt){
  evt.preventDefault();
  let txt = $textarea.val();
  let usr = $(this).text();
  let idusr = this.id;
  switch(arrobaGato){
    case "@":
      regex1 = /[\@][\w\.\-_]*/g
      matchs1 = txt.match(regex1);
      //console.log(matchs1)
      //console.log(matchs1[matchs1.length - 1])
      //console.log(matchs1.length)
      txt = txt.replace(matchs1[matchs1.length-1], "@" + usr + "~" + idusr + " ")
      break;
    case "#":
      regex2 = /[\#][\w\.\-_]*/g
      matchs2 = txt.match(regex2);
      txt = txt.replace(matchs2[matchs2.length-1], "#" + usr + "~" + idusr + " ")
      break;
  }
  match = [];
  arrobaGato = "";
  $textarea.val(txt);
});

textarea{
	border: 1px solid gray;
	height: 100px;
	min-width: 100%;
	max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<div contenteditable="true"></div>-->
<br/><br/><br/>
<textarea autofocus="true"></textarea>
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display: none;">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" id='1'>User1</a></li>
    <li><a href="#" id='2'>User2</a></li>
    <li><a href="#" id='3'>User3</a></li>
    <li><a href="#" id='4'>User4</a></li>
  </ul>
</div>

2 Answers

Voted

Mariano · Answer 1 · 2020-11-25T01:29:26+08:00

The problem

You are having a very common error , which is:

find what text matches a searched text

regex1  = /[\@][\w\.\-_]*/g;
matchs1 = txt.match(regex1);

replace that text found in the string

txt = txt.replace(matchs1[matchs1.length-1], nuevoTexto );

This will always replace the first occurrence of the text it matches, even when the regex matched text at another position.

To explain it easier, let's see a simplified example of this:

var original = "abc a",
    regex    = /a$/,                      //coincide sólo con una "a" al final
    coincid  = original.match(regex)[0];  //valor: "a"

console.log("Regex:", regex, "\tTexto original:", original);

//y ahora reemplazamos "a" (mal!)
var reempl   = original.replace(coincid, "<X>");
console.log("Pero, error, reemplaza en la posición equivocada:",
            reempl);

//En cambio, hay que buscar y reemplazar en la misma operación
var reempl   = original.replace(regex, "<X>");
console.log("Ahora sí, reemplazamos lo que realmente coincidió:",
            reempl);

First correction (answering the question)

To make it always match the last occurrence of @xx..or #yy..., we use the following regular expression ^? :

/^([\s\S]*[@#])\S* ?/

^- Start of text
(.. )- Group 1 - saves the text from the beginning to the last [@#], since it matches:
- [\s\S]*- Any number of characters. It is the same as .*(but, unlike this, it also matches \n). The quantifier * causes the last occurrence of what follows in the pattern to be searched for.
  
  By default, quantifiers are " greedy ", that is, they compare as much as possible (up to the maximum number of times allowed), without causing the rest of the pattern to fail. That is, it finds the longest possible match (given a given starting point) that also allows the rest of the pattern to match.
- [@#]- It is a character class , which matches 1 character (either of the two: at sign or numeral).
\S*- Matches all non-whitespace characters .
Alternatively, it could be used [^\s@#]*to only replace the first part of @uno#doswhen they are not separated by spaces.
　?- Optionally a space at the end (since in the replacement we will add 1 space).

That is, we are having the regex engine consume all possible characters from the start of the text to the last [@#], and we are recording the text that was matched in this group 1 to use the backreference of this match when replacing with $1. For example, it matches like this:

@uno #dos tres @cuatro
^             ^^  \S*
+-- [\s\S]* --/|
|             [@#]
\__ Grupo 1 ___/
    -texto grabado en $1

So at replace time it $1will contain @uno #dos tres @.

Code:

This is all it takes to replace the last occurrence in the clickmenu event:

$textarea.val(
    txt.replace(/^([\s\S]*[@#])\S* ?/,"$1" + usr + "~" + idusr + " ")
);

var arrobaGato = "";
var $textarea = $('textarea');
var $btndropdown = $('.dropdown button');
/*Detectamos @, # o espacio*/
$textarea.on('keypress', function (evt) { //Abrir el dropdown por [@#]
  if (evt.which == 64 || evt.which == 35) {
    arrobaGato = String.fromCharCode(evt.which);
    $btndropdown.dropdown('toggle');
  } else if (evt.which == 32) { //cancelar todo porque teclea espacio
    arrobaGato = "";
    $('.dropdown.open').removeClass('open');
  }else if(arrobaGato != ""     //Si sigue escribiendo después de [@#]
           && !$('.dropdown').hasClass('open')){
    $btndropdown.dropdown('toggle');
  }
});
/*obtenemos el nombre seleccionado del menu*/
$('.dropdown li a').on('click', function(evt){
  evt.preventDefault();
  let txt = $textarea.val();
  let usr = $(this).text();
  let idusr = this.id;
  
  $textarea.val(
	  txt.replace(/^([\s\S]*[@#])\S* ?/,"$1" + usr + "~" + idusr + " ")
  ).focus();
  arrobaGato = "";
});

textarea{
  border: 1px solid gray;
  height: 50px;
  min-width: 100%;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<div contenteditable="true"></div>-->
<br/><br/><br/>
<textarea autofocus="true"></textarea>
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display: none;">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" id='1'>User1</a></li>
    <li><a href="#" id='2'>User2</a></li>
    <li><a href="#" id='3'>User3</a></li>
    <li><a href="#" id='4'>User4</a></li>
  </ul>
</div>

Background issue: replace at current position

Is the solution really to replace the last occurrence? What if the user moved the cursor and is typing in the middle of the text?

Text: @before @Us<<<Cursor here>>> @after

Get the last occurrence before the current position:

The position of the cursor is obtained with .selectionStart ^{( IE9+ )} .
And if there was selected text, when replacing we delete from that position to .selectionEnd .

We are going to use the same regular expression, modified with these values. For example, if the cursor is at position 10 , we would have to get the last character [#@]within the first 10 characters, that is, up to 9 characters followed by an at sign or a numeral:

/^([\s\S]{0,9}[@#])\S* ?/

Which in code, using the RegExp() constructor , would be:

re = new RegExp("^([\\s\\S]{0," + ($textarea.prop("selectionStart") - 1) + "}[@#])\\S* ?");

What's more, now we can use this strategy to see when to show the menu and when to hide it...

Show menu based on cursor position:

First we get the text up to the cursor position:

txtAntes = txt.substr(0, $textarea.prop("selectionStart") );

And we should show the menu only when there is a [@#]followed by non-space characters up to that position. That is, when it matches /[@#]\S*$/(at the end of txtAntes).

if ( /[@#]\S*$/.test(txtAntes) ) {
    // Mostrar el menú
} else {
    // Ocultarlo
}

end code

var $textarea = $('textarea');

/* Detectamos @ o # */
function evaluarMenu(evt) {
    let txtAntes = $textarea.val().substr(0, $textarea.prop("selectionStart"));
    if ( /[@#]\S*$/.test(txtAntes) ) { //Abrir el dropdown por [@#]
        $('.dropdown:not(.open)').addClass('open');
    
        if (evt.originalEvent instanceof MouseEvent)
            evt.stopPropagation(); //si hizo click, que no cierre el menú
        
    } else { //ocultar porque no está en una posición después de [@#]
        $('.dropdown.open').removeClass('open');
    }
}

$textarea.on('keyup', evaluarMenu);
$textarea.on('input', evaluarMenu);
$textarea.on('click', evaluarMenu);
$textarea.on('select', evaluarMenu);

/*obtenemos el nombre seleccionado del menu*/
$('.dropdown li a').on('click', function(evt){
    evt.preventDefault();
    let txt = $textarea.val();
    let usr = $(this).text() + "~" + this.id + " ";
    let selStart = $textarea.prop("selectionStart"); //posición del cursor
    let selEnd   = $textarea.prop("selectionEnd");

    if (selStart < selEnd) // Si hay selección, eliminarla al reemplazar
        txt = txt.substr(0,selStart) + txt.substr(selEnd);
 
    //reemplazar la última ocurrencia antes de la posición actual
    if (selStart) --selStart;
    let re = new RegExp("^([\\s\\S]{0," + selStart + "}[@#])\\S* ?");
  
    $textarea.val(
        txt.replace(re, function(m, $1) {
            selStart = $1.length + usr.length;  //nueva posición del cursor
            return $1 + usr;  //reemplazar por "$1" + usr
        })
    )
      .prop("selectionStart", selStart) //poner el cursor y el foco
      .prop("selectionEnd", selStart)
      .focus();
});

textarea{
  border: 1px solid gray;
  height: 50px;
  min-width: 100%;
  max-width: 100%;
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- HTML -->
<textarea autofocus="true"></textarea>
<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display: none;">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" id='1'>User1</a></li>
    <li><a href="#" id='2'>User2</a></li>
    <li><a href="#" id='3'>User3</a></li>
    <li><a href="#" id='4'>User4</a></li>
  </ul>
</div>

Black Sheep · Answer 2 · 2020-11-24T20:15:32+08:00

I've refactored your code a bit and I think I've solved your problems.

What I have done is first check if textareait is empty, if it is empty simply insert the selected user.

If it is not empty, I pass it first in a variable with all the text that is in it textarea, I do a cleaning of the @and I convert all of it stringinto a arrayand I also put the new selected user in the array.

Then it only remains to remove it from arrayand convert it with the prefix @ o #and print it again in the textarea.

The code can be improved for sure, for example if you have selected all the users with @and then select the next one with #they change all to #...

But as I already said the problems you had at the beginning are eliminated.

A lot of blah blah... better to see the code:

var textArea     = $('textarea');
var btndropdown  = $('.dropdown button');
var arrobaGato   = ""; 
var isEmpty      = false;
var notEmptyText = '';

// Aquí comprobamos previamente si el textarea está vacio o no
$(document).on('focus','textarea', function(){

  if (!$.trim($(this).val())) {
   
    isEmpty = true;
    
  } else {
    
    isEmpty = false;
    // Si no está vacío guardamos el texto antes que cambie algo
    notEmptyText = $(this).val();
  }
});

textArea.on('keypress', function (evt) { 
  
  if (evt.which == 64 || evt.which == 35) {
    
    arrobaGato = String.fromCharCode(evt.which);
    btndropdown.dropdown('toggle');    
    
  } else if (evt.which == 32) {
    
    arrobaGato = "";
    $('.dropdown.open').removeClass('open');
    isEmpty      = false;
    notEmptyText = '';
    
  } else if(arrobaGato !== "" && !$('.dropdown').hasClass('open')){
    
    btndropdown.dropdown('toggle');
  }  
});

/*obtenemos el nombre seleccionado del menu*/
$('.dropdown li a').on('click', function(evt){
  
  evt.preventDefault();  
  
  var usr    = $(this).text();
  var idusr  = $(this).prop('id');
  var txtNew = '';  
    
  if (isEmpty) {
    
      // Si está vacio agregamos simplemente el usario
      txtNew = arrobaGato + usr + "~" + idusr + " ";   
        
  } else {
        
      // Si no está vacio limpiamos los tags y lo convertimos en array
      var textClean = $.trim(notEmptyText.replace(/[@]|[#]/g, '')).split(' ');    
        
      // agregamos el nuevo usuario seleccionado
      textClean.push(usr + "~" + idusr);
        
    // agregamos los tags a cada usuario
    textClean.forEach(function (item) {
      txtNew += arrobaGato + item + " ";
    });
  }
  
  isEmpty = false;
  arrobaGato = "";
  textArea.val(txtNew);
});

textarea{
	border: 1px solid gray;
	height: 100px;
	min-width: 100%;
	max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<div contenteditable="true"></div>-->
<br/><br/><br/>
<textarea autofocus="true"></textarea>
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="display: none;">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" id='1'>User1</a></li>
    <li><a href="#" id='2'>User2</a></li>
    <li><a href="#" id='3'>User3</a></li>
    <li><a href="#" id='4'>User4</a></li>
  </ul>
</div>

Replace the last match of a text using regex

The problem

First correction (answering the question)

Background issue: replace at current position

end code

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?