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
}

Coddy.Tech：免费灵活的全栈编程学习平台，零基础也能轻松入门

Coding Adventure：游戏化编程学习平台，让孩子在闯关中学编程

30aitool：B站UP主独立开发的免费多功能工具导航站

BotSharp：.NET开源AI多智能体开发框架，快速构建企业级AI应用

Photoskop：免费互动式摄影学习平台，用 “边做边学” 掌握摄影核心技能

上面是“input输入文字输出对应的内容（如果有图片显示，”的全面内容，想了解更多关于 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_125.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！