Как сделать вывод данных из объекта в определённом порядке?

Question

[smurzak3]

Я захотел написать сервис, в котором пользователь вводит любое слово, и оно формируется из специальных букв в виде картинки
Данные у меня хранятся в объекте, где ключ-буква, а значение- ссылка на изображение буквы.
Возникла проблема в том, что когда пишу слово, то буквы генерируются в алфавитном порядке, к примеру, если написать слово "лол", сначала выведется две "л", затем одна "о", т.к буква "л" находится первее в списке, чем "л"
Как это можно исправить?
Вот код:

let word = document.querySelector('.word');
let wrapper = document.querySelector('.wrapper');
let obj = {
    'а': 'https://github.com/itsFide/converter/blob/master/img/а.png?raw=true',
    'А': 'https://github.com/itsFide/converter/blob/master/img/а.png?raw=true',
    'б':'https://github.com/itsFide/converter/blob/master/img/б.png?raw=true',
    'Б':'https://github.com/itsFide/converter/blob/master/img/б.png?raw=true',
    'в': 'https://github.com/itsFide/converter/blob/master/img/в.png?raw=true',
    'В': 'https://github.com/itsFide/converter/blob/master/img/в.png?raw=true',
    'г': 'https://github.com/itsFide/converter/blob/master/img/г.png?raw=true',
    'Г': 'https://github.com/itsFide/converter/blob/master/img/г.png?raw=true',
    'д' : 'https://github.com/itsFide/converter/blob/master/img/д.png?raw=true',
    'Д' : 'https://github.com/itsFide/converter/blob/master/img/д.png?raw=true',
    'е' : 'https://github.com/itsFide/converter/blob/master/img/е.png?raw=true',
    'Е' : 'https://github.com/itsFide/converter/blob/master/img/е.png?raw=true',
    'ё' : 'https://github.com/itsFide/converter/blob/master/img/ё.png?raw=true',
    'Ё' : 'https://github.com/itsFide/converter/blob/master/img/ё.png?raw=true',
    'ж' : 'https://github.com/itsFide/converter/blob/master/img/ж.png?raw=true',
    'Ж' : 'https://github.com/itsFide/converter/blob/master/img/ж.png?raw=true',
    'з' : 'https://github.com/itsFide/converter/blob/master/img/з.png?raw=true',
    'З' : 'https://github.com/itsFide/converter/blob/master/img/з.png?raw=true',
    'и' : 'https://github.com/itsFide/converter/blob/master/img/и.png?raw=true',
    'И' : 'https://github.com/itsFide/converter/blob/master/img/и.png?raw=true',
    'й' : 'https://github.com/itsFide/converter/blob/master/img/й.png?raw=true',
    'Й' : 'https://github.com/itsFide/converter/blob/master/img/й.png?raw=true',
    'к' : 'https://github.com/itsFide/converter/blob/master/img/к.png?raw=true',
    'К' : 'https://github.com/itsFide/converter/blob/master/img/к.png?raw=true',
    'л' : 'https://github.com/itsFide/converter/blob/master/img/л.png?raw=true',
    'Л' : 'https://github.com/itsFide/converter/blob/master/img/л.png?raw=true',
    'м' : 'https://github.com/itsFide/converter/blob/master/img/м.png?raw=true',
    'М' : 'https://github.com/itsFide/converter/blob/master/img/м.png?raw=true',
    'н' : 'https://github.com/itsFide/converter/blob/master/img/н.png?raw=true',
    'Н' : 'https://github.com/itsFide/converter/blob/master/img/Н.png?raw=true',
    'о' : 'https://github.com/itsFide/converter/blob/master/img/о.png?raw=true',
    'О' : 'https://github.com/itsFide/converter/blob/master/img/о.png?raw=true',
    'п' : 'https://github.com/itsFide/converter/blob/master/img/п.png?raw=true',
    'П' : 'https://github.com/itsFide/converter/blob/master/img/п.png?raw=true',
    'р' : 'https://github.com/itsFide/converter/blob/master/img/р.png?raw=true',
    'Р' : 'https://github.com/itsFide/converter/blob/master/img/р.png?raw=true',
    'с' : 'https://github.com/itsFide/converter/blob/master/img/с.png?raw=true',
    'С' : 'https://github.com/itsFide/converter/blob/master/img/с.png?raw=true',
    'т' : 'https://github.com/itsFide/converter/blob/master/img/т.png?raw=true',
    'Т' : 'https://github.com/itsFide/converter/blob/master/img/т.png?raw=true',
}
let generateBtn = document.querySelector('#generate');
generateBtn.addEventListener('click',()=>{
    let str = word.value;
    let strSplit = str.split('');
    for(let key in obj){
        
        for(let i = 0; i < strSplit.length; i++){
            let letters = strSplit[i];
            if(letters == key){
                let img = `<img src="${obj[key]}" alt="">`
                wrapper.insertAdjacentHTML('beforeend',img )
            }
        }
        
    }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="word" type="text" placeholder="Введите слово...">
    <button id="generate">Сгенерировать</button>
    <div class="wrapper">
        
    </div>
    <script src="js/main.js"></script>
</body>
</html>

Comments

[Сергей Сергей]

Внешний цикл должен быть для перебора strSplit, внутренний цикл для выбора буквы. Здесь наоборот.

Answer 1

[0xD34F]

Перезаписываем разметку:

wrapper.innerHTML = Array
  .from(word.value, n => obj[n] ? `<img src="${obj[n]}">` : '')
  .join('');

Или, удаляем существующие узлы и создаём новые:

for (let n = null; n = wrapper.lastChild; n.remove()) ;

for (const n of word.value) {
  if (obj.hasOwnProperty(n)) {
    const img = new Image;
    img.src = obj[n];
    wrapper.append(img);
  }
}

// или

wrapper.replaceChildren(...Array.prototype.reduce.call(
  word.value,
  (acc, n) => (
    obj[n] && ((acc[acc.length] = new Image).src = obj[n]),
    acc
  ),
  []
));

Или, удаляем лишние/создаём недостающие узлы:

while (word.value.length < wrapper.children.length) {
  wrapper.removeChild(wrapper.lastElementChild);
}

while (word.value.length > wrapper.children.length) {
  wrapper.appendChild(document.createElement('img'));
}

Array.prototype.forEach.call(wrapper.children, (n, i) => {
  const src = obj[word.value[i]];
  if (!(n.hidden = !src)) {
    n.src = src;
  }
});

Конечно, вопрос был про другое, но это просто чудовищно:

let obj = {
    'а': 'https://github.com/itsFide/converter/blob/master/img/а.png?raw=true',
    'А': 'https://github.com/itsFide/converter/blob/master/img/а.png?raw=true',
    'б':'https://github.com/itsFide/converter/blob/master/img/б.png?raw=true',
    ...

Давайте-ка сократим:

const obj = Object.fromEntries(Array.prototype.flatMap.call(
  'абвгдеёжзийклмнопрстуфхцчшщъыьэюя', n => {
    const url = `https://github.com/itsFide/converter/blob/master/img/${n}.png?raw=true`;
    return [
      [ n,               url ],
      [ n.toUpperCase(), url ],
    ];
  }
));

Comments

[smurzak3]

Спасибо большое)