how to change the background color of aonly a word of a javascript string?

Question

This is my code:

$(document).ready(function(){
  var $question_mark = "?";
  var $question = "They look " . concat($question_mark) . concat(" the plaining the wall ") . concat($question_mark) . concat(" the girls");
  $('.scrolling_quiz').text($question);
});

this code shows a string like: They look ? the planing the wall ? the girls

now i want to add background:blue just to the "?". not to the full sentence. Can you please send me an idea or solution to this?

Use the deprecated font tag which is otherwise universally supported and used widely by all sorts of html generators and RTEs: var $question_mark = "<font color=blue>?</font>"; — Bekim Bacaj
– Bekim Bacaj, Commented May 8, 2016 at 17:38

Nathan Wakefield · Accepted Answer · 2016-05-08 18:08:26Z

1

To expand on Mehdi's idea, you might have something like:

var $question_mark = "<span class='blue'>?</span>";
var $question = "They look " + $question_mark + " the plaining the wall " + $question_mark + " the girls";

And then your css will look like:

.blue {
    background: blue;
}

If you meant that you want everything between the ?'s to be blue, you could do this:

var $question_mark = "?";
var $question = "They look <span class='blue'>" + $question_mark + " the plaining the wall " + $question_mark + "</span> the girls";

EDIT

I have created a jsfiddle and fixed the issue.

https://jsfiddle.net/uc42z0LL/6/

I suspect you weren't including the jquery dependency.

edited May 8, 2016 at 18:08

answered May 8, 2016 at 17:25

Nathan Wakefield

1051 silver badge11 bronze badges

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

2 Comments

shayla karzon Over a year ago

can you please check my link and tell why it's not working? I followed your system: jsfiddle.net/fLvo8hgc

Nathan Wakefield Over a year ago

@shaylakarzon I changed $('.scrolling_quiz').text($question); to $('.scrolling_quiz').html($question);. This way, the text you want to show is treated as HTML instead of plaintext. jsfiddle.net/fLvo8hgc/1

Collectives™ on Stack Overflow

how to change the background color of aonly a word of a javascript string?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related