时间戳

首页 > 解决方案 > 如果文本匹配值，则查找键

javascript - 如果文本匹配值，则查找键

问题描述

我试图仅突出显示常规 js 中括号之间的数字。颜色基于价值（在这种情况下水果的类型）。HTML

<a class="temple" href="something @ URL">LARGE FRUIT (215)</a>
<a class="temple" href="something @ URL">PINEAPPLE (38)</a>
<a class="temple" href="something @ URL">RED APPLE (76)</a>

我的字典

var my_dict = {'BLUE':['ORANGE'], ['GRAPE']
               'YELLOW':['PINEAPPLE'], ['KIWI']}

我可以独立使用它们，但它很混乱，如果删除标签可能会破坏代码：

let Pineapple       = document.querySelector('.temple')
PINEAPPLE.innerHTML = PINEAPPLE.innerHTML.replace(/\([^\)]*\)/, '<span class="red">$&</span>')

这是我到目前为止所拥有的：

function color(){
  let fruits = document.querySelector('.temple')
  for (let i = 0; i<fruits.length; i++) {
    let str = fruits.innerHTML //this gives me the text I need.

我的目标是使用结果（值）来找到键并最终只为数字着色。

标签： javascript

解决方案

那 ？

const my_dict = 
  { BLUE:   [ 'ORANGE', 'GRAPE' ] 
  , YELLOW: [ 'PINEAPPLE', 'KIWI' ]  
  , RED:    [ 'APPLE' ]  
  };

// ES5 code
const my_dict_reverse = 
  Object
    .keys( my_dict)
    .reduce( function(r,k)
      {
      my_dict[k].forEach( function(fruit) { r[fruit] = k } );
      return r;
      },{});
// my_dict_reverse = { ORANGE: 'BLUE', GRAPE: 'BLUE', PINEAPPLE: 'YELLOW', KIWI: 'YELLOW', APPLE: 'RED' }
  
document
  .querySelectorAll('.temple')
  .forEach( function(el)
  {
  let pos        = el.textContent.search(/\([^\)]*\)/)
    , fruit      = el.textContent.slice(0,pos)
    , val        = el.textContent.slice(pos) 
    , colorClass = my_dict_reverse[ fruit.replace(/^\s+|\s+$/g,'')] || ''
    ;
  el.innerHTML = fruit
               + '<span class="'  + colorClass + '">'
               + val +'</span>';
  });


/* ES10 code ...

const my_dict_reverse = Object.keys( my_dict).reduce((r,k)=>
  {
  my_dict[k].forEach(fruit=>r[fruit]=k)
  return r
  },{})
  
document.querySelectorAll('.temple').forEach(el=>
  {
  let [fruit, val] = el.textContent.split(/(?=\()|(?<=\))/)
    , colorClass   = my_dict_reverse[ fruit.trim()] ?? ''
    ;
  el.innerHTML = `${fruit}<span class="${colorClass}">${val}</span>`
  })
*/
body { background: steelblue; }
a.temple     {
  color           : black; 
  float           : left;
  clear           : both;
  text-decoration : none;
  }
span.RED     { color : red;    }
span.BLUE    { color : blue;   }
span.YELLOW  { color : yellow; }
<a class="temple" href="something @ URL">LARGE FRUIT (215)</a>
<a class="temple" href="something @ URL">PINEAPPLE (38)</a>
<a class="temple" href="something @ URL">APPLE (76)</a>

推荐阅读