JavaScript YAML 解析器

发布于 2024-10-05 10:34:50 字数 1539 浏览 5 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

我的影子我的梦 2024-10-12 10:34:50

JS-YAML 解析器在浏览器中工作。这是一个在线演示:https://nodeca.github.io/js-yaml。不过,它的主要目标是 Node.js,而浏览器版本只是为了好玩:)

JS-YAML parser works in browser. Here is an online demonstration : https://nodeca.github.io/js-yaml. Though, it's primary goal is node.js, and browser version was done just for fun :)

戏剧牡丹亭 2024-10-12 10:34:50

这是我找到的一个。不确定这符合多少规格,但它符合我的需求。

https://github.com/jeremyfa/yaml.js

Here is one that I found. Not sure of how much of the spec this meets, but it suited my needs.

https://github.com/jeremyfa/yaml.js

半﹌身腐败 2024-10-12 10:34:50

很抱歉回答旧帖子,但我遇到了和你一样的问题。

可用的 javascript YAML 解析器都无法满足我的需求,因此我开发了自己的解析器:
此处提供:http://code.google.com/p/javascript-yaml -parser/

希望它对某人有帮助:)

Cumps,
迪奥戈

sorry for answering an old post, but I bumped into the same problem as you.

None of the javascript YAML parsers available satisfied my needs so I developed my own:
It is available here: http://code.google.com/p/javascript-yaml-parser/

Hope it helps somebody :)

Cumps,
Diogo

蓬勃野心 2024-10-12 10:34:50

js-yaml 在 OSX 上的 Safari、Chrome 和 Firefox 中运行良好。下面是一个示例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test js-yaml</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js-yaml/dist/js-yaml.min.js"></script>
    <script type="text/javascript">

        // YAML string to Javascript object
        var obj = jsyaml.load( 'greeting: hello\nname: world' );
        console.log( obj );

        // YAML file to Javascript object
        $.get( 'https://raw.githubusercontent.com/nodeca/js-yaml/c50f9936bd1e99d64a54d30400e377f4fda401c5/benchmark/samples/document_application2.yaml', function( data ) {
            var obj = jsyaml.load( data );
            console.log( obj );
        });

        // Huge YAML file (7.2 MB) to Javascript object
        $.get( 'https://raw.githubusercontent.com/nodeca/js-yaml/master/benchmark/samples/document_huge.yaml', function( data ) {
            var obj = jsyaml.load( data );
            console.log( obj );
        });

    </script>
</head>
<body>
<h1>Test js-yaml</h1>
<p><a href="https://github.com/nodeca/js-yaml">https://github.com/nodeca/js-yaml</a></p>
</body>
</html>

编辑 2024-06-25

自 ES6 (ECMAScript 2015) 起,您可以使用 fetch 使用 vanilla JS(无外部依赖项)加载 YAML 内容。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display YAML File</title>
</head>

<body>
    <h1>YAML File Display</h1>
    <label for="yaml-url">YAML File URL</label>
    <input id="yaml-url" type="text" style="width: 100%;"
        value="https://raw.githubusercontent.com/nodeca/js-yaml/master/benchmark/samples/document_huge.yaml">
    <button onclick="loadYAMLFile()">Load</button>
    <pre id="yaml-content"></pre>

    <script>
        "use strict";
        function loadYAMLFile() {
            const yamlUrl = document.getElementById("yaml-url").value;
            fetch(yamlUrl)
                .then(response => response.text())
                .then(data => {
                    const yamlContentElement = document.getElementById("yaml-content");
                    yamlContentElement.textContent = data;
                })
                .catch(error => {
                    console.error("Error loading YAML file:", error);
                    const yamlContentElement = document.getElementById("yaml-content");
                    yamlContentElement.textContent = "Error loading YAML file";
                });
        }
    </script>
</body>

</html>

js-yaml works fine in Safari, Chrome and Firefox on OSX. Here is an example :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test js-yaml</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./js-yaml/dist/js-yaml.min.js"></script>
    <script type="text/javascript">

        // YAML string to Javascript object
        var obj = jsyaml.load( 'greeting: hello\nname: world' );
        console.log( obj );

        // YAML file to Javascript object
        $.get( 'https://raw.githubusercontent.com/nodeca/js-yaml/c50f9936bd1e99d64a54d30400e377f4fda401c5/benchmark/samples/document_application2.yaml', function( data ) {
            var obj = jsyaml.load( data );
            console.log( obj );
        });

        // Huge YAML file (7.2 MB) to Javascript object
        $.get( 'https://raw.githubusercontent.com/nodeca/js-yaml/master/benchmark/samples/document_huge.yaml', function( data ) {
            var obj = jsyaml.load( data );
            console.log( obj );
        });

    </script>
</head>
<body>
<h1>Test js-yaml</h1>
<p><a href="https://github.com/nodeca/js-yaml">https://github.com/nodeca/js-yaml</a></p>
</body>
</html>

Edit 2024-06-25

Since ES6 (ECMAScript 2015), you can load YAML content with vanilla JS (no external dependencies) with fetch.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display YAML File</title>
</head>

<body>
    <h1>YAML File Display</h1>
    <label for="yaml-url">YAML File URL</label>
    <input id="yaml-url" type="text" style="width: 100%;"
        value="https://raw.githubusercontent.com/nodeca/js-yaml/master/benchmark/samples/document_huge.yaml">
    <button onclick="loadYAMLFile()">Load</button>
    <pre id="yaml-content"></pre>

    <script>
        "use strict";
        function loadYAMLFile() {
            const yamlUrl = document.getElementById("yaml-url").value;
            fetch(yamlUrl)
                .then(response => response.text())
                .then(data => {
                    const yamlContentElement = document.getElementById("yaml-content");
                    yamlContentElement.textContent = data;
                })
                .catch(error => {
                    console.error("Error loading YAML file:", error);
                    const yamlContentElement = document.getElementById("yaml-content");
                    yamlContentElement.textContent = "Error loading YAML file";
                });
        }
    </script>
</body>

</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文