Struggling to find a solution to iterate through a string and extract individual characters at specific positions for conversion

Question

Struggling to find a solution to iterate through a string and extract individual characters at specific positions for conversion

function generateFont() {
var userInput = document.getElementById("getName").value;
var fonts = {
  a: ['æ','ɐ','ᴁ','𝖆','𝓪','𝕒','ꪖ','🄰'],
  b: ['ɓ', 'ƃ','ᴯ','ᴃ','𐅸','𝖇','𝒷','𝓫','𝕓','🄱'],
  c: ['ƈ','ɔ','ɕ','𝖈','匚','𝓬','𝕔','🄲'],
  d: ['đ','ɖ','ɗ','ƌ','ð','ȡ','𐅤','Ԃ','𝖉','𝐝','𝓭','𝕕','🄳'],
  e: ['ǝ', 'ɛ','ɘ','ɚ','𝖊','Ⓔ','𝓮','𝕖','🄴'],
  f: ['ƒ','ƭ','ɟ','𐅿','𝖋','𝓯','𝕗','🄵'],
  g: ['ǥ','ɠ','ƣ','𝖌','𝓖','𝓰','𝕘','🄶'],
  h: ['ƕ','ħ','𝖍','𝓱','𝕙','ꫝ','🄷'],
  i: ['ɨ','ı','𝖎','𝓲','𝕚','🄸'],
  j: ['𝖏','𝕛','𝓳','𝕛','🄹'],
  k: ['ƙ','ʞ','𝖐','ⓚ','𝓴','𝕜','🄺'],
  l: ['ł','ƚ','𝖑','ｌ','𝓵','𝕝','🄻'],
  m: ['ᵯ','𝖒','ⓜ','𝓶','𝕞','🄼'],
  n: ['ɲ','ƞ','ŋ','ᵰ','ռ','𝖓','𝕟','𝓷','🄽'],
  o: ['œ','ø','ɵ','ȣ','ʊ','𝖔','𝓸','𝕠','🄾'],
  p: ['ƥ','ᵽ','𝖕','𝓹','𝕡','ρ','🄿'],
  q: ['ƍ','𝖖','𝓺','𝕢','🅀'],
  r: ['ᵲ','𝖗','𝕣','𝓻','𝕣','🅁'],
  s: ['ƨ','𝖘','𝕤','𝓼','ᦓ','🅂'],
  t: ['ʈ','ŧ','𝖙','𝓽','𝕥','🅃'],
  u: ['ᵾ','𝖚','𝓾','𝕦','🅄'],
  v: ['ʋ','𝖛','𝓿','𝕧','🅅'],
  w: ['𝓦','𝔀','𝐰','𝕨','᭙','🅆'],
  x: ['χ','𝖝','𝔁','𝕩','🅇'],
  y: ['ƴ','ƛ','𝔂','𝕪','🅈'],
  z: ['ƶ','ȥ','𝕫','🅉']
};
var text = "";
for (var i = 0; i < userInput.length; i++) {
    var character = userInput.charAt(i);
    var randomIndex = Math.floor(Math.random() * fonts[character].length);
    text += fonts[character][randomIndex];
}
console.log(text);
}

I'm attempting to convert each character of the input into randomly selected fancy fonts. For example, if the input is "abc", I want to get the value of each spot and convert it to the selected font.

I've encountered some difficulties and crashed a few times during my attempts.

javascript html css

Answer 1

Answer №1

From what I gather from your query, you are looking to generate text from random indices of customized font arrays based on the provided text.

The following code appears to achieve this:

function fontGen() {
  const fontMap = {
    a: ['æ', 'ɐ', 'ᴁ', '𝖆', '𝓪', '𝕒', 'ꪖ', '🄰'],
    b: ['ɓ', 'ƃ', 'ᴯ', 'ᴃ', '𐅸', '𝖇', '𝒷', '𝓫', '𝕓', '🄱'],
    c: ['ƈ', 'ɔ', 'ɕ', '𝖈', '匚', '𝓬', '𝕔', '🄲'],
    d: ['đ', 'ɖ', 'ɗ', 'ƌ', 'ð', 'ȡ', '𐅤', 'Ԃ', '𝖉', '𝐝', '𝓭', '𝕕', '🄳'],
    e: ['ǝ', 'ɛ', 'ɘ', 'ɚ', '𝖊', 'Ⓔ', '𝓮', '𝕖', '🄴'],
    f: ['ƒ', 'ƭ', 'ɟ', '𐅿', '𝖋', '𝓯', '𝕗', '🄵'],
    g: ['ǥ', 'ɠ', 'ƣ', '𝖌', '𝓖', '𝓰', '𝕘', '🄶'],
    h: ['ƕ', 'ħ', '𝖍', '𝓱', '𝕙', 'ꫝ', '🄷'],
    i: ['ɨ', 'ı', '𝖎', '𝓲', '𝕚', '🄸'],
    j: ['𝖏', '𝕛', '𝓳', '𝕛', '🄹'],
    k: ['ƙ', 'ʞ', '𝖐', 'ⓚ', '𝓴', '𝕜', '🄺'],
    l: ['ł', 'ƚ', '𝖑', 'ｌ', '𝓵', '𝕝', '🄻'],
    m: ['ᵯ', '𝖒', 'ⓜ', '𝓶', '𝕞', '🄼'],
    n: ['ɲ', 'ƞ', 'ŋ', 'ᵰ', 'ռ', '𝖓', '𝕟', '𝓷', '🄽'],
    o: ['œ', 'ø', 'ɵ', 'ȣ', 'ʊ', '𝖔', '𝓸', '𝕠', '🄾'],
    p: ['ƥ', 'ᵽ', '𝖕', '𝓹', '𝕡', 'ρ', '🄿'],
    q: ['ƍ', '𝖖', '𝓺', '𝕢', '🅀'],
    r: ['ᵲ', '𝖗', '𝕣', '𝓻', '𝕣', '🅁'],
    s: ['ƨ', '𝖘', '𝕤', '𝓼', 'ᦓ', '🅂'],
    t: ['ʈ', 'ŧ', '𝖙', '𝓽', '𝕥', '🅃'],
    u: ['ᵾ', '𝖚', '𝓾', '𝕦', '🅄'],
    v: ['ʋ', '𝖛', '𝓿', '𝕧', '🅅'],
    w: ['𝓦', '𝔀', '𝐰', '𝕨', '᭙', '🅆'],
    x: ['χ', '𝖝', '𝔁', '𝕩', '🅇'],
    y: ['ƴ', 'ƛ', '𝔂', '𝕪', '🅈'],
    z: ['ƶ', 'ȥ', '𝕫', '🅉']
  }
  const userName = document.getElementById("getName").value
  let customText = ''
  for (let i = 0; i < userName.length; i++) {
    const randomFontIndex = Math.floor(Math.random() * fontMap[userName[i]].length)
    customText += fontMap[userName[i]][randomFontIndex]
  }
}

Input Example: cnegfati
Result: ƈŋ𝖊ƣɟɐʈɨ

Answer 2

From what I gather from your query, you are looking to generate text from random indices of customized font arrays based on the provided text.

The following code appears to achieve this:

function fontGen() {
  const fontMap = {
    a: ['æ', 'ɐ', 'ᴁ', '𝖆', '𝓪', '𝕒', 'ꪖ', '🄰'],
    b: ['ɓ', 'ƃ', 'ᴯ', 'ᴃ', '𐅸', '𝖇', '𝒷', '𝓫', '𝕓', '🄱'],
    c: ['ƈ', 'ɔ', 'ɕ', '𝖈', '匚', '𝓬', '𝕔', '🄲'],
    d: ['đ', 'ɖ', 'ɗ', 'ƌ', 'ð', 'ȡ', '𐅤', 'Ԃ', '𝖉', '𝐝', '𝓭', '𝕕', '🄳'],
    e: ['ǝ', 'ɛ', 'ɘ', 'ɚ', '𝖊', 'Ⓔ', '𝓮', '𝕖', '🄴'],
    f: ['ƒ', 'ƭ', 'ɟ', '𐅿', '𝖋', '𝓯', '𝕗', '🄵'],
    g: ['ǥ', 'ɠ', 'ƣ', '𝖌', '𝓖', '𝓰', '𝕘', '🄶'],
    h: ['ƕ', 'ħ', '𝖍', '𝓱', '𝕙', 'ꫝ', '🄷'],
    i: ['ɨ', 'ı', '𝖎', '𝓲', '𝕚', '🄸'],
    j: ['𝖏', '𝕛', '𝓳', '𝕛', '🄹'],
    k: ['ƙ', 'ʞ', '𝖐', 'ⓚ', '𝓴', '𝕜', '🄺'],
    l: ['ł', 'ƚ', '𝖑', 'ｌ', '𝓵', '𝕝', '🄻'],
    m: ['ᵯ', '𝖒', 'ⓜ', '𝓶', '𝕞', '🄼'],
    n: ['ɲ', 'ƞ', 'ŋ', 'ᵰ', 'ռ', '𝖓', '𝕟', '𝓷', '🄽'],
    o: ['œ', 'ø', 'ɵ', 'ȣ', 'ʊ', '𝖔', '𝓸', '𝕠', '🄾'],
    p: ['ƥ', 'ᵽ', '𝖕', '𝓹', '𝕡', 'ρ', '🄿'],
    q: ['ƍ', '𝖖', '𝓺', '𝕢', '🅀'],
    r: ['ᵲ', '𝖗', '𝕣', '𝓻', '𝕣', '🅁'],
    s: ['ƨ', '𝖘', '𝕤', '𝓼', 'ᦓ', '🅂'],
    t: ['ʈ', 'ŧ', '𝖙', '𝓽', '𝕥', '🅃'],
    u: ['ᵾ', '𝖚', '𝓾', '𝕦', '🅄'],
    v: ['ʋ', '𝖛', '𝓿', '𝕧', '🅅'],
    w: ['𝓦', '𝔀', '𝐰', '𝕨', '᭙', '🅆'],
    x: ['χ', '𝖝', '𝔁', '𝕩', '🅇'],
    y: ['ƴ', 'ƛ', '𝔂', '𝕪', '🅈'],
    z: ['ƶ', 'ȥ', '𝕫', '🅉']
  }
  const userName = document.getElementById("getName").value
  let customText = ''
  for (let i = 0; i < userName.length; i++) {
    const randomFontIndex = Math.floor(Math.random() * fontMap[userName[i]].length)
    customText += fontMap[userName[i]][randomFontIndex]
  }
}

Input Example: cnegfati
Result: ƈŋ𝖊ƣɟɐʈɨ

Answer 3

Answer №2

To implement a font variation effect, create a mapping object that links letters to different font arrays. Then, you can easily retrieve the appropriate font array by looking up the character in the object.

const fontVariations = {
    a: aFonts,
    b: bFonts,
    ...
};
let characters = userName.split();
let styledText = characters.map(character => {
    let currentFont = fontVariations[character];
    if (currentFont) {
        return currentFont[Math.floor(Math.random()*currentFont.length)];
    } else {
        return character;
    }
}).join("");

Answer 4

To implement a font variation effect, create a mapping object that links letters to different font arrays. Then, you can easily retrieve the appropriate font array by looking up the character in the object.

const fontVariations = {
    a: aFonts,
    b: bFonts,
    ...
};
let characters = userName.split();
let styledText = characters.map(character => {
    let currentFont = fontVariations[character];
    if (currentFont) {
        return currentFont[Math.floor(Math.random()*currentFont.length)];
    } else {
        return character;
    }
}).join("");

Struggling to find a solution to iterate through a string and extract individual characters at specific positions for conversion

Answer №1

Answer №2

Similar questions

The file is being uploaded using the "button" type

Revise the reply within ExpressJS

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

Jquery scaling settings

The response from AJAX delivers HTML data

Check if any element within a class satisfies the specified condition using Jquery

Learning how to invoke a JavaScript function from a Ruby on Rails layout

Images are failing to show up in the iPhone design

Tips on causing a forEach loop to pause for a regex substitution to occur

Transmitting information following successful password verification

The Escargot Expedition: A One-Person Learning Adventure

Is it possible to override tags on a Bootstrap landing page?

Angular component.html does not compile due to a check that includes inline array creation

Utilizing Node Mailer and Sendgrid to send emails in an Angular MEAN stack project with the angular-fullstack framework generated by Yeoman

Is there an alternative to Captcha?

Using a Sequelize where statement with a date condition

An issue arose while attempting to pin a file on IPFS: A TypeError [ERR_INVALID_ARG_TYPE] was encountered, specifying that the argument "url" must be a string data type

BeautifulSoup retrieves the entire DIV element, excluding its contents

Troubleshooting issues with NodeJS and Express authentication middleware functionality

Arrangement of elements on a page