Make selected text bold/unbold

Question

I\'m wrapping the selected text in span tags, when you click a button. If I then select a different piece of text and click the button, that text also gets wrapped in tags.

Answer 1

Why you are trying to bold text doing it by hand when you can use built in feature. Modern browsers implements execCommand function that allows to bold, underline etc. on text. You can write just:

$('.embolden').click(function(){
    document.execCommand('bold');
});

and selected text will be made bold and if it's already bold, the text styling will be removed.

A list of commands and a little doc can be found here. (More about browser support here).

$(document).ready(function() {
  $('#jBold').click(function() {
    document.execCommand('bold');
  });
});

#fake_textarea {
  width: 100%;
  height: 200px;
  border: 1px solid red;
}

button {
  font-weigth: bold;
}

B

  Select some text and click the button to make it bold...
  
Or write your own text