input输入文字输出对应的内容（如果有图片显示，

html代码：

<input type="text" size="20" value="" id="value"/>
<button onclick="btn()">生成</button>
<span id="result" class="font"></span>

JS代码

function btn(){
    //需要转换的图片
    var imgArr =[{
        name:'中',
        img:'img/ba.png',
        value:''
    },{
        name:'国',
        img:'img/ban.png',
        value:''
    },{
        name:'人',
        img:'img/bai.png',
        value:''
    }]

    //获取input内容
    let _value = document.getElementById('value').value
    let _valueArr = []
    for(let i=0; i<_value.length; i++){
        _valueArr.push({
            name: _value[i],
            img:'',
            value:_value[i]
        })
    }

    //2个数组合并
    const _merge = _valueArr.map(item => {
        const data = imgArr.find(i => item.name == i.name)
        return {
          ...item,
          ...data
        }
    })

    //遍历插入
    let _result = []
    for(let i=0; i<_merge.length; i++){
        if(_merge[i].img != ''){
            _result += '<img src="' + _merge[i].img + '" style="width:30px;background-size:100%">'
        }else{
            _result += '<i>' + _merge[i].value + '</i>'
        }
    }
    document.getElementById('result').innerHTML = _result
}