CODEWITHSUNDEEP
jqueryarraysstringloopsindexof
Alfha
Alfha

Reputation: 117

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

I am using loop method to detect all the occurrence of different substrings present inside specified characters [ ] , I want all of these substrings(retrieved from user's input) to have red color. But only the last such substring is showing red color, and all the substrings before it are not having their color as red!

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

Take a look at what I've tried so far ..

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

Upvotes: 1

Views: 161

Answers (1)

Avilona
Avilona

Reputation: 121

try to use regural expression instead of nested loop

$(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 - you can read about regexp syntax here. The explanation of used expression here:

(         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

Upvotes: 1

Related Questions