how to check if a string contains substring and color it in javascript?

Question

I have to create:

1 <input type="text">
1 <textarea>
1 <div>
1 <button>

I have to fill the div with the textarea's content but if the content contains the input's string, I have to color it with <span>.

For example:

If the input contains "is" and the textarea contains "this is a beautiful day", I should put the following text in the div "this is a beautiful day" and color every time that the "is" string appears.

I should use indexOf() and a loop.

I have this:

var a = $("#inp1").val();
var b = $("#txt").val();

var x = b.indexOf(a);
    if (x > -1)

You now know the position of b in a. You can split your string and recreate it, your b wrapped in a styled span. w3schools.com/jsref/jsref_substring.asp — TheFrozenOne
– TheFrozenOne, Commented Apr 22, 2015 at 12:58

JuniorDev · Accepted Answer · 2015-04-22 13:13:18Z

3

If you absolutely have to use indexOf

while(b.indexOf(a) != -1) {
   b = b.replace(a, '[X]');
}
while(b.indexOf('[X]') != -1) {
   b = b.replace('[X]', '<span style="color:yellow;">' + a + '</span>');
}
$("#targetDiv").html(b);

You can also do this with RegExp

var a = $("#inp1").val();
var b = $("#txt").val();
var re = new RegExp(a, 'g');
var divContent = b.replace(re, '<span style="color:yellow;">' + a + '</span>');
$("#targetDiv").html(divContent);

Here is a fiddle with the indexOf

http://jsfiddle.net/eva3ttuL/1/

answered Apr 22, 2015 at 13:13

JuniorDev

1,2002 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

moral17592 Over a year ago

Can you explain me what is the ['x'] refers to?

JuniorDev Over a year ago

It's just a placeholder, since you wanted to use indexOf. Since I'm replacing a string with the same string in a span element; it would be an infinite loop :)

moral17592 Over a year ago

if i replace the string with the same string in a span element ( .replace(a, '<span style="color:yellow;">' + a + '</span>'). why would it be an infinite loop?

JuniorDev Over a year ago

Because indexOf will find the a string again, since you put it in there again :)

Islam Zedan · Accepted Answer · 2015-04-22 13:18:23Z

2

Here is the code to find and change color of all searched word

$(document).ready(function () {
    $("#here").on("keydown keyup", function () {
        var mytext = $(this).val();
        var find = $("#find").val();
        mytext=mytext.replace(new RegExp(find,"g"), "<span class='me'>"+find+"</span>");
        $("#output").html(mytext);

    });
})

  .me{color: #00f;
  background-color: #EFFF00;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="find" type="text" /><br/>
<textarea id="here"></textarea><br/>
<div id="output"></div>

answered Apr 22, 2015 at 13:18

Islam Zedan

6464 silver badges21 bronze badges

Comments

Aravind Bharathy · Accepted Answer · 2015-04-22 13:14:31Z

0

Use JavaScript substring to split the string inside textarea and form a paragraph with the highlighted text.

HTML code:

<input id="inp1" type="text"/><br>
<textarea id="txt" col="10" row="5"></textarea><br>
<div id="fillarea">
    click on check
</div>
<button id="check">check</button>

CSS for highlighting:

.highlight{
    background-color:yellow;
}

jQuery code:

$('#check').on('click',function(){
    var a = $("#inp1").val();
    var b = $("#txt").val();
    var x = b.indexOf(a);
    var first = b.substring(0,x);
    var middle = b.substring(x,x+a.length);
    var last = b.substring(x+a.length,b.length);
    var to_print = '<p>' + first + '<span class="highlight">' + middle + '</span> ' + last + '</p>';
    $('#fillarea').empty();
    $('#fillarea').append(to_print);
});

Demo fiddle here

answered Apr 22, 2015 at 13:14

Aravind Bharathy

1,6103 gold badges16 silver badges32 bronze badges

2 Comments

moral17592 Over a year ago

that could be good but notice that if i write in the input: "ab" and in the the textarea: "deabchab", only the first "ab" is highlight. I have to highlight everytime that "ab" appears

Aravind Bharathy Over a year ago

@moral17592 I didn't notice that. Thanks :)

Arun · Accepted Answer · 2015-04-22 13:15:41Z

0

It helps you jsfiddle

$('.submit').click(function(){
    var content = $('.textarea').val();
    var ans = content.replace($('.input').val(), "<span style='color:red;'>"+$('.input').val()+"</span>");
    $('.text').html(ans);
});

answered Apr 22, 2015 at 13:15

Arun

1421 gold badge1 silver badge9 bronze badges

1 Comment

Seamus Over a year ago

Apparently, the poster is supposed to use indexOf(). Also, this only highlights the first instance of $('.input').val().

Николай Караджов · Accepted Answer · 2015-04-22 13:19:22Z

0

var input = $("#inp1").val();
var text = $("#txt").val();
var div = $("#div");

div.val(text.replace(new RegExp(input,'g'), makeSpan(input)));

function makeSpan(str) {
  return '<span style="background-color:red">' + str + '</span>';
}

answered Apr 22, 2015 at 13:19

Николай Караджов

711 silver badge8 bronze badges

Comments

Kiren S · Accepted Answer · 2015-04-22 13:48:21Z

0

Just try this

<html>
  <title></title>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
   var a = "is";
   var b = "this is beautiful";
    
    var x = b.indexOf(a);
    
     if (x > -1) {
      var re = new RegExp(a, 'g');
      res = b.replace(re, "<span style='color:red'>"+a+"</span>" );
      $("#result").html(res);
     }
  })
 
 </script>
    </head>
<body>
<div id="result"></div>
</body>

answered Apr 22, 2015 at 13:48

Kiren S

3,1178 gold badges43 silver badges73 bronze badges

Comments

Mushahid Khan · Accepted Answer · 2015-04-22 13:02:01Z

-1

You can use IndexOf Javascript function

var str1 = "ABCDEFGHIJK";
var str2 = "DEFG";
if(str1.indexOf(str2) != -1){
    alert(str2 + " found");
}

answered Apr 22, 2015 at 13:02

Mushahid Khan

2,8441 gold badge21 silver badges32 bronze badges

1 Comment

Mushahid Khan Over a year ago

have dare to face then comment here.....without giving Explanation You have no right to do this.....

Collectives™ on Stack Overflow

how to check if a string contains substring and color it in javascript?

7 Answers 7

4 Comments

Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related