输入名字和链接转换成对象

与妖为邻

于 2024-08-26 02:33:09 发布

阅读量89

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/lulei5153/article/details/141537163

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入名字和链接转换成对象</title>
</head>
<style>
   
</style>
<body>
    <input type="text" id="nameInput" placeholder="名字+空格+链接输入示范:可莉 https://">
    <button onclick="convertName()">转换</button>
    <p id="result">名字+空格+链接输入示范:可莉
        https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/klee/image.png?strip=all&quality=100&w=140
        转换成：{
        star: "45",
        name: "可莉",
        image:
        "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/klee/image.png?strip=all&quality=100&w=140"
        },</p>

<script>
    function parseInput(input) {
        // 去除字符串两端的空格，并替换中间的多余空格为一个空格
        input = input.trim().replace(/\s+/g, ' ');

        // 将输入字符串按空格分割
        const parts = input.split(' ');
       
        if (parts.length !== 2) {
            throw new Error('输入格式不正确');
        }

        // 提取名称和图片URL
        const name = parts[0].trim();
        const image = parts[1].trim();

        // 验证URL是否有效
        if (!isValidUrl(image)) {
            throw new Error('无效的图片URL');
        }

        // 构建输出对象
        const output = {
            star: "45",  // 修改这里，将数字4改为字符串"4"
            name: name,
            image: image
        };

        // 将对象转换为字符串，并去掉属性名的双引号，保留属性值的双引号
        let result = JSON.stringify(output, null, 2)
            .replace(/"(\w+)":\s*/g, '$1: ')
            .replace(/:\s*"/g, ': "');

        return result;
    }

    function isValidUrl(url) {
        const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
        return urlPattern.test(url);
    }

    function convertName() {
        const inputValue = document.getElementById('nameInput').value;
        try {
            const result = parseInput(inputValue);
            document.getElementById('result').innerText = result;
        } catch (error) {
            alert(error.message);
        }
    }

    // 示例输入
    const input = "安柏 https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/amber/image.png?strip=all&quality=100&w=140";
    console.log(parseInput(input));
</script>

</body>

</html>