how to get a string which have background-color and color different?

Question

how to get a string which has background-color and color different? Expected output BCFE

Getting output : BCDEF

$(function(){
  //alert()
   var a =''
    $('tr td').map(function(){

      var arr = $(this).attr('style').split('#');
      arr[1] =arr[1].substring(0,arr[1].indexOf(';'))
   if(arr[1]!=arr[2]){
     a+=$(this).text();
   }
      // console.log(arr);
    })
    console.log(a)

})

HTML

<table>
    <tr>
        <td style="background-color: #0d71bb;color: #0d71bb">A</td>
        <td style="background-color: #0ea432;color: #0f0f10">B</td>
        <td style="background-color: #e0b4b4;color: #e6a200">C</td>
    </tr>
    <tr>
        <td style="background-color: #FFFF00;color: #FF0">D</td>
        <td style="background-color: #a9d5de;color: #a3c293">E</td>
        <td style="background-color: #b4d95c;color: #b21e1e">F</td>
    </tr>

</table>

here is my code https://jsbin.com/vaqifujulo/edit?html,js,console

Explain more

Show text in the string which is visible

Answer 1

You're getting the styles from your td tags in a rather unusual way. I suggest you use jQuery's .css() method to get the colors you're after instead of trying to split the style tag:

var bgColor = $(this).css('background-color'); // get background color td
var letterColor = $(this).css('color'); // get text color of td

Also, note that you don't need to use .map() , instead you can use .each() to loop over each tr td element.

See working example below:

 $(function() { var a = ''; $('tr td').each(function() { var bgColor = $(this).css('background-color'); var letterColor = $(this).css('color'); if (bgColor != letterColor) { a += $(this).text(); } }) console.log(a); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td style="background-color: #0d71bb;color: #0d71bb">A</td> <td style="background-color: #0ea432;color: #0f0f10">B</td> <td style="background-color: #e0b4b4;color: #e6a200">C</td> </tr> <tr> <td style="background-color: #FFFF00;color: #FF0">D</td> <td style="background-color: #a9d5de;color: #a3c293">E</td> <td style="background-color: #b4d95c;color: #b21e1e">F</td> </tr> </table> 

Answer 2

将十六进制颜色转换为RGB颜色并进行匹配

Answer 3

You can compare background-color and color property of each element and filter accordingly

 function giveStrings() { let op = [...document.querySelectorAll('tr td')] .filter(ele => ele.style["background-color"] !== ele.style["color"]) .map(e => e.innerText) console.log(op) } 

 <table> <tr> <td style="background-color: #0d71bb;color: #0d71bb">A</td> <td style="background-color: #0ea432;color: #0f0f10">B</td> <td style="background-color: #e0b4b4;color: #e6a200">C</td> </tr> <tr> <td style="background-color: #FFFF00;color: #FF0">D</td> <td style="background-color: #a9d5de;color: #a3c293">E</td> <td style="background-color: #b4d95c;color: #b21e1e">F</td> </tr> </table> <button onclick='giveStrings()'>Clcik me</button>