8

Tengo un problema al querer reemplazar la ultima coincidencia de una expresión regular en un textarea, explico:

  • Si yo escribo @ en el textarea se abre un menú donde hay nombres de usuarios al seleccionar se auto-completa con el nombre seleccionado.

  • Pero si yo escribo nuevamente @ y vuelvo a seleccionar otro usuario el replace se efectúa en la primera @.

  • Si yo escribo @a y selecciono un usuario, y vuelvo a escribir @a y selecciono otro usuario se sustituye de manera correcta en la ultima coincidencia.

¿Cómo puedo resolver el segundo punto?

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 respuestas 2

11

El problema

Estás teniendo un error muy habitual, que es:

  1. buscar qué texto coincide con un texto buscado

    regex1  = /[\@][\w\.\-_]*/g;
    matchs1 = txt.match(regex1);
    
  2. reemplazar ese texto encontrado en el string

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

Esto siempre va a reemplazar la primera ocurrencia del texto con el que coincide, incluso cuando el regex coincidió con un texto en otra posición.

Para explicarlo más sencillo, veamos un ejemplo simplificado de esto:

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);


Primera corrección (respondiendo a la pregunta)

Para hacer que coincida siempre con la última ocurrencia de @xx.. o #yy..., usamos la siguiente expresión regular🔎:

/^([\s\S]*[@#])\S* ?/
  • ^ - Inicio del texto
  • (..) - Grupo 1 - graba el texto desde el comienzo hasta el último [@#], ya que coincide con:

    • [\s\S]* - Cualquier cantidad de caracteres. Es lo mismo que .* (pero, a diferencia de este, también coincide con \n). El cuantificador * hace que se busque la última ocurrencia de lo que sigue en el patrón.

      Por defecto, los cuantificadores son "codiciosos", es decir, comparan todo lo posible (hasta el número máximo de veces permitido), sin provocar que el resto del patrón falle. Es decir, busca la coincidencia más larga posible (dado un determinado punto de partida) que a la vez permita que el resto del patrón coincida.

    • [@#] - Es una clase de caracteres, que coincide con 1 caracter (cualquiera de los dos: arroba o numeral).

  • \S* - Coincide con todos los caracteres que no son espacios en blanco.
    Alternativamente, se podría usar [^\s@#]* para que sólo reemplace la primera parte de @uno#dos cuando no están separados por espacios.

  •  ? - Opcionalmente un espacio al final (ya que en el reemplazo agregaremos 1 espacio).

Es decir, estamos haciendo que el motor de regex consuma todos los caracteres posibles desde el inicio del texto hasta el último [@#], y estamos grabando el texto que coincidió en este grupo 1 para usar la retroreferencia de esta coincidencia al momento de reemplazar con $1. Por ejemplo, coincide de esta forma:

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

Entonces, a la hora de reemplazar $1 contendrá @uno #dos tres @.

Código:

Esto es lo único necesario para reemplazar la última ocurrencia en el evento click del menú:

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



Problema de fondo: reemplazar en la posición actual

¿Realmente la solución es reemplazar la última ocurrencia? ¿Y si el usuario cambió de posición el cursor y está escribiendo en el medio del texto?

Texto: @antes @Us<<<Cursor acá>>> @después


Obtener la última ocurrencia antes de la posición actual:

La posición del cursor la obtenemos con .selectionStart (IE9+).
Y si hubiese texto seleccionado, al reemplazar eliminamos desde esa posición hasta .selectionEnd.

Vamos a usar la misma expresión regular, modificada con estos valores. Por ejemplo, si el cursor se encuentra en la posición 10, tendríamos que obtener el último caracter [#@] dentro de los primeros 10 caracteres, o sea hasta 9 caracteres seguidos por una arroba o un numeral:

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

Que en código, usando el constructor RegExp(), quedaría:

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

Es más, ahora podemos usar esta estrategia para ver cuándo hay que mostrar el menú y cuándo ocultarlo...


Mostrar el menú según la posición del cursor:

Primero obtenemos el texto hasta la posición del cursor:

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

Y deberíamos mostrar el menú sólo cuando haya un [@#] seguido de caracteres que no son espacios hasta esa posición. Es decir, cuando coincida con /[@#]\S*$/ (en el final de txtAntes).

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


Código final

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>

1
  • 3
    +1 y aceptada, me has resuelto un problema que tenia a futuro y lo deje de lado por ahora, no esperaba esta respuesta completa y mucho menos esperaba que estuviese resuelta con la posición del cursor
    – JuankGlezz
    el 24 nov. 2016 a las 16:08
3

He refactorizado un poco tú código y creo que he resuelto tus problemas.

Lo que he hecho es en primer lugar comprobar si el textarea esta vacío, si está vacío inserta simplemente el usuario seleccionado.

Si no está vacío lo paso primero en una variable con todo el texto que hay en el textarea, hago una limpieza de las @ y lo convierto todo el string en un array y meto también el nuevo usuario seleccionado al array.

Después queda solo sacarlo del array y convertirlo con el prefijo @ o # y imprimirlo nuevamente en el textarea.

Se puede mejorar seguro más el código, por ejemplo si haz seleccionado todos los usarios con @ y luego seleccionas el próximo con # cambian todos al #...

Pero como ya dije los problemas que haz tenido al principio están eliminados.

Mucho bla bla... mejor ver el código:

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>

1
  • 2
    Gracias por tomarte el tiempo en responder, pero creo que entendiste mal mi código y te guiaste por ello, si resuelves parte del problema que tengo pero no lo hace de la manera correcta, es decir, si tu intentas escribir esto: hola @user1~1 se parsea a esto: @ @user1~1 y no es correcto, igual la tendré como referencia para optimizar mi codigo
    – JuankGlezz
    el 24 nov. 2016 a las 16:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.