字符串拆分成数组

Smile_xiaoyan

已于 2023-02-12 21:01:19 修改

阅读量502

点赞数

文章标签： javascript 前端 json

于 2023-02-12 20:58:59 首次发布

本文链接：https://blog.csdn.net/Smile_xiaoyan/article/details/128999441

版权

知识点：

① 获取 JSON 文件：
可以通过 fetch API 或者 XMLHttpRequest 对象读取 JSON 数据，然后再循环遍历该字段；

② 将字符串拆分成数组：
使用 JavaScript 正则表达式和字符串的 split 方法实现这个需求。

代码

<!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>
    <script>
        // 获取json文件
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '歌词.json', true);
        xhr.onreadystatechange = function () {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                var res = JSON.parse(this.responseText);
                var data = res.scripts;
                data.forEach(element => {
                    var result = element.text.split(' ')
                    splitChinese(result);
                    console.log(splitChinese(result));
                });
            }
        };
        xhr.send()
        function splitChinese(arr) {
            return arr.flatMap(item => {
                if (typeof item === 'string') {
                    return item.split(/([\u4e00-\u9fa5])/).filter(char => char !== '');
                } else {
                    return [item];
                }
            });
        }
    </script>
</body>

</html>

<!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>
    <script>
        fetch('歌词.json')
            .then(response => response.json())
            .then(data => {
                data.scripts.forEach(element => {
                    console.log(element.text)
                });
            });
    </script>
</body>
</html>