DomParse

DOM解析

by s_yoshiki

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<!-- 
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> -->

<header>
    <div class="container">
        <h1>html Parser</h1>
        <span>htmlをパースします</span>
    </div>
</header>
<hr>
<main>
    <div class="container">
        <div>
            <textarea class="form-control" id="text"><html>
	<body>
		<div>
			<p id="hello">
				Hello World!
			</p>
			<a href="http://hoge.co.jp"></a>
		</div>
	</body>
</html>
			</textarea>
        </div>
        <hr>
        <div>
            <div>
                <select name="horoscope" class="form-control" id="select">
					<option value="1">a - href</option>
					<option value="2">img - src</option>
				</select>
            </div>
            <div>
                <label class="radio-inline"><input type="radio" name="format" id="type:json" checked> JSON </label>
                <label class="radio-inline"><input type="radio" name="format" id="type:csv"> CSV </label>
            </div>
        </div>
        <div align="right">
            <button class="btn btn-primary mb-2" id="run">
				run
			</button>
        </div>
        <hr>
        <div>
            <textarea class="form-control" id="result"></textarea>
        </div>
    </div>
</main>
<hr>
<footer>
</footer>

CSS

header,
footer {
    font-family: "Impact";
    background-color: #3f3f3f;
    color: #f3f3f3;
}

#text {
    height: 300px;
}

#result {
    height: 300px;
}

JavaScript

(() => {
    "use stricts"

    document.getElementById("run").addEventListener("click", () => {
        try {
            let src = document.getElementById("text").value
            let parsed_obj = getParsedObject(src)

            let type_csv = document.getElementById("type:csv").checked
            let dst = {}
            let mode = document.getElementById("select").value

            if (mode === '1') {
                dst = getHrefs(parsed_obj)
            } else if (mode === '2') {
                dst = getImgSrcs(parsed_obj)
            }

            if (type_csv) {
                document.getElementById("result").value = putList(dst)
            } else {
                document.getElementById("result").value = JSON.stringify(dst)
            }

        } catch (e) {
            alert(e)
        }
    })

    function getParsedObject(str_html) {
        let parser = new DOMParser()
        let doc = parser.parseFromString(str_html, "text/html")
        return doc
    }

    function getHrefs(doc) {
        return Array.from(
            doc.links,
            (e) => {
                return e.getAttribute("href").toString()
            }
        )
    }

    function getImgSrcs(doc) {
        return Array.from(
            doc.images,
            (e) => {
                return e.getAttribute("src").toString()
            }
        )
    }

    function putList(src) {
        var result = ""
        src.forEach((e) => {
            result += e + "\n"
        })
        return result
    }
})()