使用javascript仅包含带有html标记的选定文本

Question

I am trying to wrap only selected text with a specific tag using javascript tag. I find a code but when I click a button then it will add a tag which I don't want because I only want to apply the tag around selected element.

Example JS code:

function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

$('#bold').click(function() {
    wrapText("myTa", "<strong>", "</strong>");
});
$('#italic').click(function() {
    wrapText("myTa", "<em>", "</em>");
});
$('#underline').click(function() {
    wrapText("myTa", "<u>", "</u>");
});
$('#code').click(function() {
    wrapText("myTa", "<pre><code>", "</code></pre>");
});

This is the Full working code Link

Any help will be appreciated.

Answer 1

Use this condition: if(start != end){ ... }

http://jsfiddle.net/sherali/bd4np/119/

function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    if (start != end){
       var selectedText = textArea.val().substring(start, end);
       var replacement = openTag + selectedText + closeTag;
       textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
    }
}