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

使用正则表达式替换文本的最后一个匹配项

772

当我想一个一个地替换最后一个匹配时，我遇到了问题expresión regular，textarea我解释说：

如果我在其中写入@，textarea则会在选择时打开一个菜单，其中有用户名，它会使用所选名称自动完成。
但是，如果我再次编写@并选择另一个用户，replace它会在第一个@.
如果我写入@a并选择一个用户，然后我再次写入@a并选择另一个用户，它会在最后一次匹配中正确替换。

我该如何解决第二点？

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

问题

您遇到了一个非常常见的错误，即：

查找与搜索文本匹配的文本

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

替换在字符串中找到的文本

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

这将始终替换它匹配的文本的第一次出现，即使正则表达式匹配另一个位置的文本。

为了更容易解释，让我们看一个简化的例子：

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

第一次更正（回答问题）

为了使其始终匹配@xx..or的最后一次出现#yy...，我们使用以下正则表达式^?：

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

^-文本的开始
(.. )- Group 1 -保存从头到尾的文本[@#]，因为它匹配：
- [\s\S]*- 任意数量的字符。它与.*（但与此不同的是，它也匹配\n）。量词 *导致在要搜索的模式中最后出现的内容。
  
  默认情况下，量词是“贪婪的”，也就是说，它们尽可能多地比较（直到允许的最大次数），而不会导致模式的其余部分失败。也就是说，它会找到最长可能的匹配（给定起点），该匹配也允许模式的其余部分匹配。
- [@#]- 它是一个字符类，匹配 1 个字符（两者之一：符号或数字）。
\S*- 匹配所有非空白字符。
或者，它可以用于仅替换它们不被空格分隔时[^\s@#]*的第一部分。@uno#dos
　?- 可选地在末尾添加一个空格（因为在替换中我们将添加 1 个空格）。

也就是说，我们让正则表达式引擎消耗从文本开头到最后一个的所有可能字符[@#]，并且我们正在记录该组 1 中匹配的文本，以便在替换为时使用该匹配的反向引用$1。例如，它匹配如下：

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

所以在替换时它将$1包含@uno #dos tres @.

代码：

这就是替换click菜单事件中最后一次出现的全部内容：

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

背景问题：在当前位置替换

解决方案真的要替换最后一次出现吗？如果用户移动了光标并在文本中间输入了怎么办？

文本：@before @Us<<<光标在这里>>> @after

获取当前位置之前的最后一次出现：

光标的位置是通过.selectionStart ^{( IE9+ )}获得的。
如果有选定的文本，替换时我们从该位置删除到.selectionEnd。

我们将使用相同的正则表达式，用这些值进行修改。例如，如果光标位于位置10，我们将必须获取[#@]前 10 个字符中的最后一个字符，即最多9 个字符后跟 at 符号或数字：

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

在代码中，使用RegExp()构造函数，将是：

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

更重要的是，现在我们可以使用这个策略来查看何时显示菜单以及何时隐藏它......

根据光标位置显示菜单：

首先，我们将文本放到光标位置：

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

[@#]并且我们应该仅在到达该位置后有一个非空格字符时才显示菜单。也就是说，当它匹配时/[@#]\S*$/（在末尾txtAntes）。

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

结束代码

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

我已经重构了你的代码，我想我已经解决了你的问题。

我所做的是首先检查textarea它是否为空，如果它是空的，只需插入选定的用户。

如果它不为空，我首先将它传递到一个包含所有文本的变量中textarea，我对它进行清理@并将其全部转换string为 a array，我还将新选择的用户放入array.

然后它只剩下删除它array并使用前缀 @o将其转换#并在textarea.

可以肯定地改进代码，例如，如果您选择了所有用户，@然后选择下一个用户，#他们将全部更改为#...

但是正如我已经说过的，您在开始时遇到的问题已经消除。

很多废话……最好看代码：

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>

使用正则表达式替换文本的最后一个匹配项

问题

第一次更正（回答问题）

背景问题：在当前位置替换

结束代码

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?