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

Question

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

Edited: Change the text of input section in snippet to check if code is running properly or not!

看看我到目前为止尝试了什么..

```
<!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>

Answer 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></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

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

How to color all the occurrence of substring present inside specified characters using jQuery?

arrays

string

jquery

loops

indexof