如何使用jQuery为指定字符内出现的所有子字符串着色？答案

【问题标题】：How to color all the occurrence of substring present inside specified characters using jQuery?如何使用jQuery为指定字符内出现的所有子字符串着色？
【发布时间】：2020-10-11 07:14:09
【问题描述】：

我正在使用循环方法来检测指定字符内出现的所有不同子字符串 [ ] ，我希望所有这些子字符串（从用户输入中检索）都具有红色。但是只有最后一个这样的子串显示红色，并且它之前的所有子串都没有红色！

已编辑：更改sn-p中input section的文本以检查代码是否正常运行！

看看我到目前为止所做的尝试..

```
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 span{
 color:red;
}
</style>
</head>
 <body style="background:rgba(20,10,30,1);">
 <input id="inp" style="height:20vh; width:80vw; background:royalblue; color:white; font-weight:bold;" value="I can [talk] but if you want a punch then I can [fight] too!" />
 <p style="color:white; font-weight:bold; text-shadow:.5vw .5vw .5vw black;"></p>
  <script>
  $(function(){
  $("#inp").on("input" , function(){
   var inp1 = $(this).val();
   $("p").html(inp1);
   var i = 0;
var j = 0;
var str = $("p").text();
var arry = [ ];
   for(i = 0; i < str.length; i++){
if(str[i] === "["){
arry.push(i);
 for(j = 0; j < str.length; j++){
  if(str[j] === "]" && i<j){
    arry.push(j);
    var newinp = "<span>"+str.slice(i , j+1)+"</span>";
$("p").html(str.slice(0 , i)+newinp+str.slice(parseInt(j)+parseInt(1) , str.length));
        }
            }
            }
        }
        });
        });             
    </script>
</body>
</html>

【问题讨论】：

我建议的第一件事是对您的缩进进行排序。目前很难阅读。
Mitya你现在读起来舒服吗？
缩进还是很严重。不幸的是，我无法回答 - 我只是在做一些缓和。

标签： jquery arrays string loops indexof

【解决方案1】：

尝试使用正则表达式而不是嵌套循环

$(function(){
  $("#inp").on("input" , function(){
   var inp1 = $(this).val();
   $("p").html(inp1);
   var str = $("p").text();
   
    var result = str.replace(/(\[(?:[^\[\]]*)*\])/g, function (match) {
      return match.replace(/(\w+)/g, '<span>$1</span>');
      });
  
    $("p").html(result);
  
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 span{
 color:red;
}
</style>
</head>
 <body style="background:rgba(20,10,30,1);">
 <input id="inp" style="height:20vh; width:80vw; background:royalblue; color:white; font-weight:bold;" value="I can [talk] but if you want a punch then I can [fight] too!" />
 <p style="color:white; font-weight:bold; text-shadow:.5vw .5vw .5vw black;"></p>
</body>
</html>

http://www.javascripter.net/faq/regularexpressionsyntax.htm - 您可以在此处阅读有关正则表达式语法的信息。这里对所用表达式的解释：

(         capturing group: store the matching substring
\[        match opening bracket
(?:       a non-capturing group: grouping only, no storing
[^\[\]]*  match all characters inside brackets
)*        end of non-capturing group and * match the preceding element zero or more times
\]        match closing bracket
)         end of capturing group

【讨论】：

我不熟悉这个表达方式：(/(\[(?:[^\[\]]*)*\])/g你能详细说明或建议一个关于这个的课程，或者链接或博客解释这种表达方式的使用！
@Alfha，为答案添加了解释
谢谢，现在我有新东西要学，再次感谢！