3

This code below is now working. Credit to Matt-SL who pointed out the difference between substr and substring

This function serve to add tags to the text in a textarea just like the one you use to put your text in bold in your question&answer on Stackoverflow.

var lastFocus;

$("#bold").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    befString = "<b>";
    aftString = "</b>";
    dif = aftString.length - befString.length;

    if (lastFocus) {
        setTimeout(function () { lastFocus.focus() }, 10);
        var textEdit = document.getElementById('textEdit');
        var befSel = textEdit.value.substr(0, textEdit.selectionStart);
        var aftSel = textEdit.value.substr(textEdit.selectionEnd, textEdit.length);
        var select = textEdit.value.substr(textEdit.selectionStart, textEdit.selectionEnd-aftString.length );
        textEdit.value = befSel + befString + select + aftString + aftSel;
    }
    return (false);
});
    

$("#textEdit").blur(function() {
    lastFocus = this;
  
});
#textEdit{
width:300px;
height:200px;  
}

#bold{
font-size:25px;
cursor:pointer;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="editToolBar" class="editToolBar">
  Select all 2's and
<span id="bold"></b>click here</b></span>
</div>
<textarea id="textEdit" type="text" name="textEdit" size="" class="editDocInput" data-type="" >111112222233333</textarea>
My problem:

I can't figure out why the string is not being put back together properly. Try it and see for you self.

4
  • I get 11111<b>222223</b>33333 - what are you expecting? Jan 20, 2016 at 10:54
  • humm im expecting 11111 222222 333333 cuse i have only selected the 2's Jan 20, 2016 at 10:55
  • I assume you stepped through this code line by line to see what it was doing? What did you see?
    – user663031
    Jan 20, 2016 at 13:45
  • Well i was using substr on select when it should have been substring Jan 20, 2016 at 13:50

1 Answer 1

3

Change the line in which you define var select to use substring() instead of substr(), and no longer subtract aftString.length from textEdit.selectionEnd. This means the text selection indices line up with the expected parameters of the substring() function.

Here is a JSFiddle to demonstrate.

var select = textEdit.value.substring(textEdit.selectionStart, textEdit.selectionEnd);

As per the documentation for selectionEnd, it is the index of the first character after the selection.

The difference between substr and substring is what they expect as their second parameter:

  • substr(startIndex, length)
  • substring(startIndex, endIndex)
1
  • Wright cause substr will count and substring is giving position. Thank you that worked perfect now You got your self an answer! Jan 20, 2016 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.