通过JavaScript将RAL转换为RGB/HEX

Question

通过JavaScript将RAL转换为RGB/HEX

javascript

4

我对JavaScript是初学者... 我有一个需要以下操作的项目：

将RAL-Color-Codes转换为RGB/HEX（JavaScript）。

我想了很多，想到了一些想法：

1.) 创建一个复杂的列表，其中包含所有RAL-Codes（大约213+）

2.) 保持DRY - 获取RAL-to-RGB/HEX信息来自：http://www.ralcolor.com/

好吧 - 就像我说的：我是JavaScript的初学者...

如果您能给我一些编码的提示，那就太好了，因为我是媒体设计师，不是程序员 :(

此致敬礼， daft

- daftpanda

1

你可以做的最简单的事情就是解析 ralcolor.com 网站上的表格，并获取 td 的值，这将为您提供 ral 颜色的十六进制和 RGB 值。 - Liam Sorsby

好的，谢谢你的帮助 =）我会尝试找出如何从网站解析HTML代码；）- 你能推荐一个教程来源或类似的东西吗？ - daftpanda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enhzflep · Accepted Answer

这是解析表格本身的简短示例。这是我的标准模板blank.html文件，增加了4行表格和一些mInit中的代码。

以下是需要考虑的一些事项：

似乎每隔两行有一行为空
RGB值使用-作为分隔符，而不是,
可能不需要同时使用十六进制码和RGB码。如果您提供一个#码，它会在内部转换为rgb()码。(Chrome 32.0.1700.102 m) 如果合适，只需获取十六进制码，因为不需要像rgb值那样使用正则表达式进行修改。
您可以在http://w3schools.com上查看我使用的各种函数/属性的文档。

输出：（摘录）

There are 4 rows in the table
RAL 7046: rgb: 130,137,143 - hex: #82898F
RAL 7047: rgb: 208,208,208 - hex: #D0D0D0

/////////////////////////////////////////////////////////////
////    U n u s e d   i n   t h i s   s a m p l e
/////////////////////////////////////////////////////////////
function newEl(tag) {
  return document.createElement(tag);
}

function newTxt(txt) {
  return document.createTextNode(txt);
}

function toggleClass(element, newStr) {
  var index = element.className.indexOf(newStr);
  if (index == -1)
    element.className += ' ' + newStr;
  else {
    if (index != 0)
      newStr = ' ' + newStr;
    element.className = element.className.replace(newStr, '');
  }
}

function forEachNode(nodeList, func) {
  var i, n = nodeList.length;
  for (i = 0; i < n; i++) {
    func(nodeList[i], i, nodeList);
  }
}

/////////////////////////////////////////////////////////////
////    R e q u i r e d   b y   t h i s   s a m p l e
/////////////////////////////////////////////////////////////
function byId(e) {
  return document.getElementById(e);
}

window.addEventListener('load', mInit, false);

function mInit() {
  var tbl = byId('colTable');
  var rows = tbl.rows
  var output = '';
  var i, n, curRowNum, curRowOfCells;

  output = "There are " + rows.length + " rows in the table" + "<br>";
  for (i = 0; i < rows.length; i++) {
    curRowOfCells = rows[i].cells;
    if (rows[i].cells[0].childNodes.length != 0) {
      var curRalCode, curRgb, curHex;

      curRalCode = rows[i].cells[0].querySelectorAll('p span')[0].innerHTML;

      curRgb = rows[i].cells[1].childNodes[0].innerHTML;
      // change 130-137-143 into 130,137,143
      curRgb = curRgb.replace(/-/g, ',');

      curHex = rows[i].cells[2].childNodes[0].innerHTML;

      output += curRalCode + ": " + "rgb: " + curRgb + " - hex: " + curHex + "<br>";
    }
  }
  byId('output').innerHTML = output;
}

<div id='output'></div>
<table id='colTable'>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL 
          7046</span></p>
    </td>
    <td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">130-137-143</span></td>
    <td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#82898F</span></td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 2</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 2</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 2</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris&nbsp;tele 2</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele 
          grigio 2</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 2</span></p>
    </td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL 
          7047</span></p>
    </td>
    <td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">208-208-208</span></td>
    <td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#D0D0D0</span></td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 4</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 4</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 4</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris 
          tele 4</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele 
          grigio 4</span></p>
    </td>
    <td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
      <p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 4</span></p>
    </td>
  </tr>

</table>