How to rebuild a string with JavaScript

Question

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.

humm im expecting 11111 222222 333333 cuse i have only selected the 2's — MadeInDreams
– MadeInDreams, Commented 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
– user663031, Commented Jan 20, 2016 at 13:45
Well i was using substr on select when it should have been substring — MadeInDreams
– MadeInDreams, Commented Jan 20, 2016 at 13:50

Matt · Accepted Answer · 2016-01-20 14:41:08Z

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)

edited Jan 20, 2016 at 14:41

answered Jan 20, 2016 at 10:57

Matt

1,4072 gold badges14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MadeInDreams Over a year ago

Wright cause substr will count and substring is giving position. Thank you that worked perfect now You got your self an answer!

Collectives™ on Stack Overflow

How to rebuild a string with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related