แปลงสตริงเป็นสีแบบสุ่มด้วย JavaScript

คุณเคยต้องสร้างสีเฉพาะตามสตริง เช่น ชื่อผู้ใช้หรือชื่อเรื่องหรือไม่? ดูเหมือนจะน่าสนใจสำหรับฉันในโปรเจ็กต์การสร้างการแสดงแท็กที่ไม่ซ้ำใคร แต่ฉันไม่สามารถกำหนดสีให้กับแต่ละแท็กได้ ด้วย JavaScript คุณสามารถทำได้อย่างง่ายดาย! ในบทความนี้ เราจะแสดงวิธีเขียนโค้ดง่ายๆ ที่แปลงสตริงใดๆ ให้เป็นสีแบบสุ่มโดยใช้พื้นที่สี HSL

รหัสที่เราจะใช้ขึ้นอยู่กับสองฟังก์ชันgetColorFromString:

นี่คือรหัส:

function getColorFromString(string, saturation = 50, lightness = 75, defaultColor = '#000000') {
  // Check if the string is empty or null or has less then 3 characters
  if (!string) {
    return defaultColor;
  }
if (string.trim().length < 3) {
    return defaultColor;
  }
  
  // Calculate the hue value based on the first three characters of the string
  const hue = string.charCodeAt(0) * string.charCodeAt(1) * string.charCodeAt(2);

  // Convert the saturation and lightness values from percentages to decimals between 0 and 1
  const s = saturation / 100;
  const l = lightness / 100;

  // Calculate the alpha value
  const a = s * Math.min(l, 1 - l);

  // Calculate the red, green, and blue values
  const f = (n) => {
    const k = (n + hue / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color).toString(16).padStart(2, '0');
  };

  // Return the hex color code
  const hexCode = `#${f(0)}${f(8)}${f(4)}`;
  return hexCode || defaultColor;
}

ที่รับสตริงและพารามิเตอร์ทางเลือกบางตัวและส่งคืนรหัสสีที่สอดคล้องกันในรูปแบบของสตริงฐานสิบหก

นี่คือสิ่งที่ฟังก์ชันทำทีละขั้นตอน:

1. ตรวจสอบว่าstringอาร์กิวเมนต์เป็นโมฆะ ว่างเปล่า หรือมีอักขระน้อยกว่า 3 ตัว หากเป็นไปตามเงื่อนไขเหล่านี้ ระบบจะส่งกลับdefaultColorค่าซึ่งเป็น#000000(สีดำ)
2. คำนวณhueค่าตามอักขระสามตัวแรกของstringอาร์กิวเมนต์โดยการคูณรหัสอักขระเข้าด้วยกัน
3. แปลงค่าsaturationและlightnessค่าจากเปอร์เซ็นต์เป็นทศนิยมระหว่าง 0 ถึง 1
4. คำนวณalphaค่าตามค่าsaturationและlightness
5. กำหนดฟังก์ชันตัวช่วยfที่เรียกว่ารับจำนวนเต็มnและคำนวณค่าสีแดง สีเขียว หรือสีน้ำเงินสำหรับดัชนีนั้น
6. ใช้fฟังก์ชันตัวช่วยในการคำนวณค่าสีแดง สีเขียว และสีน้ำเงินสำหรับรหัสสีสุดท้าย
7. ส่งกลับรหัสสีสุดท้ายเป็นสตริงฐานสิบหก

นี่คือวิธีที่คุณสามารถใช้ฟังก์ชันนี้:

const color = getColorFromString("hello world");
console.log(color); // Output: "#d2df9f"

แค่นั้นแหละ! ด้วยโค้ดเพียงไม่กี่บรรทัด คุณสามารถเปลี่ยนสตริงใดๆ ให้เป็นสีเฉพาะได้ ซึ่งมีประโยชน์ในแอปพลิเคชันต่างๆ เช่น การสร้างสีอวาตาร์ การเน้นชื่อผู้ใช้ และอื่นๆ

คุณสามารถใช้getColorFromStringฟังก์ชันเพื่อเปลี่ยนสีของส่วนประกอบทั้งหมดด้วยแท็กคลาส ได้อย่างไร

<div class="colorize">item 1</div>
<div class="colorize">item 2</div>
<div class="colorize">item 3</div>
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll('.colorize');

  elements.forEach((el) => {
    const text = el.textContent.trim();
    const color = getColorFromString(text);

    el.style.backgroundColor = color;
    el.style.color = "#ffffff";
  });
});

ในตัวอย่างนี้ ก่อนอื่นเราใช้document.querySelectorAllเพื่อเลือกองค์ประกอบทั้งหมดด้วยคลาส "colorize" จากนั้นเราจะวนซ้ำแต่ละองค์ประกอบโดยใช้forEachเมธอดและตั้งค่าสีพื้นหลังเป็นสีสุ่มที่สร้างโดยgetColorFromStringฟังก์ชันโดยใช้เนื้อหาข้อความขององค์ประกอบเป็นสตริงอินพุต