Как проверить с помощью выражения reg в JavaScript, является ли введенный di git 4 или 7 di git, и затем, соответственно, выполнить функцию hexToRGB? - PullRequest
1 голос
/ 13 марта 2020

Я пытаюсь создать функцию, которая будет автоматически принимать пользовательский ввод и проверять, в каком формате он находится, и исходя из того, что он выполняет определенную функцию (RGBToHex или hexToRGB). Внутри моей функции через регулярное выражение. Я хочу проверить 4 di git ввода и 7 di git ввода пользователя, но, скорее всего, это неправильный способ, есть мысли по этому поводу?

function hexToRGB(h) {
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (h.length == 4) {
    r = "0x" + h[1] + h[1];
    g = "0x" + h[2] + h[2];
    b = "0x" + h[3] + h[3];

  // 6 digits
  } else if (h.length == 7) {
    r = "0x" + h[1] + h[2];
    g = "0x" + h[3] + h[4];
    b = "0x" + h[5] + h[6];
  }

  return "rgb("+ +r + "," + +g + "," + +b + ")";  //variables are prepended with + to convert string back to numbers
}
//hexToRGB('2222')
//hexToRGB('4616625')

//debugger;
function RGBToHex(r,g,b) {
    r = r.toString(16);
    g = g.toString(16);
    b = b.toString(16);

    if(r.length == 1) {
        "0" + r;
    }
    else if (g.length == 1) {
        "0" + g;
    }
    else {
        "0" + b;
    }    
    return "#" + r + g + b;
}
//RGBToHex(3, 82, 252)

function myFunction() {
    let input = prompt("Please enter the digit: ");
    var re = /[0-9A-Fa-f]{4||7}/g;
    if(re.test(input)) {
        hexToRGB(input);
    }
    else {
        RGBToHex(input);
    }
}
myFunction();

1 Ответ

0 голосов
/ 13 марта 2020

Я надеюсь, что это ответ, который вы ищете:

^([0-9a-fA-F]{4}|[0-9a-fA-F]{7})$

Или с DRY принцип:

const hex = '[0-9a-fA-F]';
const re = new RegExp(`^(${hex}{4}|${hex}{7})$`);

Вы можете проверить это на следующем примере:

const hex = '[0-9a-fA-F]';
const limit = `^(${hex}{4}|${hex}{7})$`;
const re = new RegExp(limit);

document.querySelector('input').addEventListener('input', function(e) {
  const input = e.target;

  if (re.test(input.value)) {
    input.style.background = 'lightgreen';
  } else {
    input.style.background = 'pink';
  }

  document.querySelector('b').innerHTML = input.value.length;
});
body { font-family: sans-serif; }
input { padding: 10px; font-size: 20px; background: pink; }
<h4>Matches only a HEX-valid 4 or 7 characters string</h4>
<input type="text" /> Length: <b>0</b>
...