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

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('');

Comments

[smurzak3]

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