добавить к выделенному значению textarea тэг

[linkoln_7]

Здравствуйте,у меня есть такая вот задача,пожалуйста,кому несложно помогите решить или идею подкиньте.
есть textarea div и кнопка

#con {
    width:300px;
    height:150px;
    border:1px double black;
}
#textar {
    width:300px;
    height:150px;
    resize: none;
   
}
 
<textarea id="textar"></textarea>
<div id="con"></div>
<input type="button" id="btn1" value="жирно" />

Подскажите как мне реализовать следующее.Выделенный текст из textarea обернуть в тег <strong> и применить это в textarea, а в div вывести примерно следующее: Мама <strong>мыла</strong> раму.
разобрался только как к целому элементу добавить css

$('#btn1').click(function () {
 
    var val = $("#textar").val();
    $('#con').html(val);
    $('#con').css({
        '': ''
    });
});

А как к выделенному тексту нет.Заранее спасибо

[Stanislav]

по просьбе трудящихся:

Скрипт

(function($, exports, window) {

if (!exports) {
    exports = {};
    if (!$) {
        window.fieldSelection = exports;
    }
}

if ($) {
    /**
     * Extend jQuery's prototype
     * @param {String} [text]
     * @return {Object|jQuery}
     */
    $.fn.fieldSelection = function(text) {
        var ret;

        this.each(function() {
            this.focus();
            ret = text == null ? exports.get(this) : exports.replace(this, text);
        });

        return ret || this;
    };
}

/**
 * Get selection.
 *
 * @param {Object} elem
 * @return {Object}
 */
exports.get = function(elem) {
    var data = {start: 0, end: elem.value.length, length: 0},
        range, textRange, dTextRange;

    // DOM 3
    if (elem.selectionStart >= 0) {
        data.start = elem.selectionStart;
        data.end = elem.selectionEnd;
        data.length = data.end - data.start;
        data.text = elem.value.substr(data.start, data.length);
    // IE
    } else if (elem.ownerDocument.selection) {
        range = elem.ownerDocument.selection.createRange();
        if (!range) return data;
        textRange = elem.createTextRange(),
        dTextRange = textRange.duplicate();
        textRange.moveToBookmark(range.getBookmark());
        dTextRange.setEndPoint('EndToStart', textRange);
        data.start = dTextRange.text.length;
        data.end = dTextRange.text.length + range.text.length;
        data.text = range.text;
        data.length = range.text.length;
    }

    return data;
}

/**
 * Replace selection.
 *
 * @param {Object} elem
 * @param {String} text
 */
exports.replace = function(elem, text) {
    var start, end,
        pos, scrollTop, scrollLeft,
        range;

    // DOM 3
    if (elem.selectionStart >= 0) {
        start = elem.selectionStart;
        end = elem.selectionEnd;
        scrollTop = elem.scrollTop;
        scrollLeft = elem.scrollLeft;
        elem.value = elem.value.substr(0, start) + text + elem.value.substr(end);
        pos = start + text.length;
        elem.selectionStart = pos;
        elem.selectionEnd = pos;

        // Restore scroll position in FF after replacement.
        elem.scrollTop = scrollTop;
        elem.scrollLeft = scrollLeft;
    // IE
    } else if (elem.ownerDocument.selection) {
        range = elem.ownerDocument.selection.createRange();
        range.text = text;
        range.move('character', 0);
        range.select();
    } else {

        // Browser not supported - set at the end.
        elem.value += text;

        // Scroll to the end of textarea to show inserted.
        elem.scrollTop = 100000;
    }
};

}(typeof jQuery != 'undefined' ? jQuery : null,
  typeof exports != 'undefined' ? exports : null,
  window));

<button id="get">get selection</button>
<button id="replace">replace selection</button>

<br />
<textarea id="textarea" style="width: 300px; height: 200px;">Здравствуйте,у меня есть такая вот задача,пожалуйста,кому несложно помогите решить или идею подкиньте.
есть textarea div и кнопка
Подскажите как мне реализовать следующее.Выделенный текст из textarea обернуть в тег <strong> и применить это в textarea, а в div вывести примерно следующее: Мама <strong>мыла</strong> раму.
разобрался только как к целому элементу добавить css
</textarea>

<br /><br />
<input type="text" id="text" />

<script>
    (function() {
        var $elem;

        $('input, textarea').focus(function(){
            $elem = $(this);
        });

        $('#get').on('click', function() {
            alert($elem.fieldSelection().text);
            window.console && console.log($elem.fieldSelection());
        });

        $('#replace').on('click', function() {
            $elem.fieldSelection('<REPLACED>');
        });
    }());
</script>
</body>
</html>

[linkoln_7]

Большое спасибо