将字符串中的所有散列替换为随机值

Question

在常量样式中迭代所有#并将其替换为随机生成的十六进制颜色的最佳方式是什么？例如：

generateRandomStyle(colours: string[]): string {
  const styles = [
    'filter:drop-shadow(1px -1.5px 0px #) drop-shadow(-1px 1.5px 0px #);',
    'filter:drop-shadow(1.5px -1px 0px #);',
  ];
  const rgbaColor = UtilService.hexToRgbA(`#${colours[Math.floor(Math.random() * colours.length)]}`);
  let style = styles[Math.floor(Math.random() * styles.length)];
  style = style.replace('#', rgbaColor);
  return style;
}

我希望输出是filter:drop-shadow(1px -1.5px 0px rgba(102,102,153,1)) drop-shadow(-1px 1.5px 0px rgba(106,101,159,1));之类的。但是我得到了输出的filter:drop-shadow(1px -1.5px 0px rgba(102,102,153,1)) drop-shadow(-1px 1.5px 0px #)。

Answer 1

您需要在Javascript中使用正则表达式进行全局替换，然后可以将随机方法作为replace调用中的第二个参数进行传递

style = style.replace(/#/g, () => (
    UtilService.hexToRgbA(
        `#${colours[Math.floor(Math.random() * colours.length)]}`
    )
));

Answer 2

您可以使用regex搜索所有#。其中我们使用g在第一个匹配后继续搜索。

然后，我们可以在replace方法中添加一个函数作为第二个参数，该方法在每次迭代中创建一个随机颜色。

​

const str = "filter:drop-shadow(1px -1.5px 0px #) drop-shadow(-1px 1.5px 0px #);";

// Get random value between "min" and "max"
const randomBetween = (min, max) => min + Math.floor(Math.random() * (max - min + 1));

// Generate random RGB color;
const getRandomColor = () => {
  const r = randomBetween(0, 255);
  const g = randomBetween(0, 255);
  const b = randomBetween(0, 255);
  
  return `rgb(${r}, ${g}, ${b})`;
}

const changed = str.replace(/#/g, getRandomColor);

console.log(changed);

​

Answer 3

如果所有'#‘都需要相同的值，可以使用

str.replace(/#/g,singleValue);

因为您可能会在浏览器javascript中使用replaceAll函数时遇到挑战。这里的singleValue是一个RGBA值。

如果每个"#“都需要不同的值，可以将singleValue作为函数传递，每次返回不同的值。