JSFiddle - React, Tailwind, and code Playground

by Sungjung Kim

HTML

<div id="content">
    <p>Web API - Selection</p>
    <p>Google Web Speech API를 테스트하던 중, STT를 통해 변환된 텍스트를 획득하기 위한 방법으로 Selection을 사용하였습니다. Selection(MSDN은 TextRange)은 웹 페이지에서 텍스트 행위를 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자 위에서 더블 클릭을 하는 이벤트를 자바스크립트 영역에서 획득할 수 있게 해주는 Web API입니다.</p>
</div>

JavaScript

function selectRange(obj) {
    if (window.getSelection) {
        var selected = window.getSelection();
            selected.selectAllChildren(obj);
        console.log(selected.toString());
    } 
    else if (document.body.createTextRange) {
        var range = document.body.createTextRange();
            range.moveToElementText(obj);
            range.select();
        alert(range.htmlText);
    }
};

/* usage example */
var content = document.getElementById("content");
var paragraph = content.getElementsByTagName("p");

for(var i = 0; i < paragraph.length; i ++) {
    paragraph[i].onclick = function() {
        selectRange(this);
    };
}