CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gautam Jha
Gautam Jha

Reputation: 1473

apply diffrent css for text separated by comma inside <div>

i am trying to change color for text which are separated by comma(','). i cant use any other tag to separate these. is that possible by jQuery or by css?

<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">ABCD,XYZ</div>
<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">cdE,hhhh</div>

Upvotes: 0

Views: 2877

Answers (7)

Mosh Feu
Mosh Feu

Reputation: 29277

If you can't change the html code at all you can use :before and :after pseudo selectors.

  1. Split the text by ,.
  2. Set attributes for each of them.
  3. Set content to :before and :after by the attributes
  4. Style those pseudo elements.

This solution will works only with 1 comma separation.

[].forEach.call(document.querySelectorAll('div'), function(item) {
  // check if there is a , in the text
  if (item.innerText.indexOf(',') > -1) {
    var texts = item.innerText.split(',');
    item.setAttribute('data-text1', texts[0]);
    item.setAttribute('data-text2', texts[1]);
    item.innerHTML = ',';
  }
});
div:before {
  content:attr(data-text1);  
  color:red;
}

div:after {
  content:attr(data-text2);  
  color:yellow;
}
<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">ABCD,XYZ</div>
<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">cdE,hhhh</div>

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

This is what I would do:

$("[data-value]").each(function(){
  var words = $(this).text().split(",");
  $(this).text("");
  for(var i=0; i< words.length; i++){
    var r = Math.floor((Math.random() * 255) + 1);
    var g = Math.floor((Math.random() * 255) + 1);
    var b = Math.floor((Math.random() * 255) + 1);

    $(this).append("<span style='color:rgb("+r+","+g+","+b+")'>"+words[i]+ ((i< words.length-1) ? ",":"")+"</span>");
  }
});

Here is the JSFiddle demo

The code randomly generates colors and sets a different color for each word.

Upvotes: 0

Jose Rocha
Jose Rocha

Reputation: 1115

Since you are using attr data use .data() to find your elements

$('div').data('value','ABCD,XYZ').each(function(i,vi){
    var arrVi = vi.innerText.split(',');
    var html = '';
    arrVi.forEach(function(vj,j){
        html += '<span style="color: green">' + vj + '</span>';
    });
    vi.innerHTML= html;
})

Change the code to the ways it suits you better.

Upvotes: 0

DvideBy0
DvideBy0

Reputation: 688

Im not sure if you are referring to the innerHTML or the tag's value.. either way. I was not able to test this due to browser issues.

$('div').each(function(){
  var textArray = $(this).html().split(',');
  var html = '';
  for(var i = 0; i < textArray.length; i++) {
    html += '<span style="color: #12345' + i + '">' + textArray[i] + '</span>';
  }
  $(this).html(html);
}

Upvotes: 1

Shuvro
Shuvro

Reputation: 1499

Check this out

$(document).ready(function(){
  $('div').each(function(){
    var text = $(this).text();
    var array = text.split(',');
    var html = array[0] + ',<span style="color:red">' + array[1] + '</span>';
    $(this).html(html);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">ABCD,XYZ</div>
<div data-value="ABCD,XYZ" style="padding-left: 12px; padding-right: 12px;">cdE,hhhh</div>

Upvotes: 0

Dmitry Yudin
Dmitry Yudin

Reputation: 978

You can use :contains() css3 selector

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

Created a fiddle for you

var colorArr = ['red', 'green'];
$( "[data-value='ABCD,XYZ']" ).each ( function(){

  var valueArr = $( this ).html().split( "," );
  console.log( valueArr );
  for (var counter = 0; counter < valueArr.length; counter++ )
  {
     valueArr[ counter ] = "<span style='color:" + colorArr[ counter ] + "'>" + valueArr[ counter ] + "</span>";
  }
  console.log( valueArr );
  $( this ).html( valueArr.join("") );

} );

Upvotes: 2

Related Questions