How to Wrap Selected Text in Edit or TextArea with a Tag in Javascript/HTML?

Some websites allow you to use some meta tags to denote the URLs, images, links and etc. For example, if you want to include a URL in your comment (only plain-text textarea), you can use:

[url]https://helloacm.com[/url]

Usually, the direct HTML tags are not allowed, they are stripped to &lt; &gt; before they are inserted into database. This prevents malicious code like <script> or other HTML stylish code that mess up the page layout. For example, the php function strip_tags, htmlspecialchars, htmlentities can be used to do this job.

The meta tags are usually denoted by square brackets, such as [. For example, [url][/url] [image][/image] can be used to denoted the URLs or images. The users do not have to remember this as long as you provide a button/image that allows the code to be automatically inserted into text area. For example, if a user has selected some text and click the URL button, the code will be automatically wrapped to [url]selected text[/url].

The following Javascript function does this job. It works on both IE and other browsers (Chrome, Firefox). So pretty much most modern browsers support this.

// insert tag a before and i after, for the DOM object h, TextArea, Edit
function lbc(h, a, i) { // helloacm.com
    var g = document.getElementById(h);
    g.focus();
    if (g.setSelectionRange) {
        var c = g.scrollTop;
        var e = g.selectionStart;
        var f = g.selectionEnd;
        g.value = g.value.substring(0, g.selectionStart) + a + g.value.substring(g.selectionStart, g.selectionEnd) + i + g.value.substring(g.selectionEnd, g.value.length);
        g.selectionStart = e;
        g.selectionEnd = f + a.length + i.length;
        g.scrollTop = c;
    } else {
        if (document.selection && document.selection.createRange) {
            g.focus();
            var b = document.selection.createRange();
            if (b.text != "") {
                b.text = a + b.text + i;
            } else {
                b.text = a + "REPLACE" + i;
            }
            g.focus();
        }
    }// helloacm.com
}

All you have to do is to add this function to the onclick event. For example:

<textarea id='text'>
</textarea>

<span onclick='javascript:lbc('text', '[URL]', '[/URL]');'>Make URL</span>

To reduce the download time, you can use this minified version:

// helloacm.com
function lbc(h,a,i){var g=getDocumentById(h);g.focus();if(g.setSelectionRange){var c=g.scrollTop;var e=g.selectionStart;var f=g.selectionEnd;g.value=g.value.substring(0,g.selectionStart)+a+g.value.substring(g.selectionStart,g.selectionEnd)+i+g.value.substring(g.selectionEnd,g.value.length);g.selectionStart=e;g.selectionEnd=f+a.length+i.length;g.scrollTop=c}else{if(document.selection&&document.selection.createRange){g.focus();var b=document.selection.createRange();if(b.text!=""){b.text=a+b.text+i}else{b.text=a+"REPLACE"+i}g.focus()}}};

–EOF (The Ultimate Computing & Technology Blog) —