How to make selected text bold/italic/underlined in javascript?

Question

I'm trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using buttons. As of now, the buttons are working, but they bold/italicize/underline everything inside the text area. Instead, I want it to work in such a way that only the text they highlight gets bold/italicized/underlined. I'd also like to know how to make it so that when they click the bold button, text that they type from then onwards will come out bold, and when they click it again, the text that is typed from then onwards will come out normal.

<script type="text/javascript">
function boldText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontWeight == "bolder" ) {
        target.style.fontWeight = "normal";
    } else {
        target.style.fontWeight = "bolder";
    }
}



function italicText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontStyle == "italic" ) {
        target.style.fontStyle = "normal";
    } else {
        target.style.fontStyle = "italic";
    }
}

function underlineText(){
    var target = document.getElementById("TextArea");
    if( target.style.textDecoration == "underline" ) {
        target.style.textDecoration = "none";
    } else {
        target.style.textDecoration = "underline";
    }
}
</script>

You cannot do that in texteditor. But you can make a div `contenteditable` and then can add style. — Harry Bomrah, Jul 06 '16 at 07:23
Refer: http://stackoverflow.com/questions/4705848/rendering-html-inside-textarea — palaѕн, Jul 06 '16 at 07:27

zer00ne · Accepted Answer · 2022-01-17T13:22:47.730

You can use execCommand(). This API was meant for developing text editors. The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable.

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
   :root {
      font: 400 2ch/1.25 Consolas;
    }
    
    body {
      font-size: 2ch
    }
    
    #editor {
      height: 100px;
      width: 375px;
      margin: 10px auto 0;
    }
    
    fieldset {
      margin: 2px auto 15px;
      width: 375px;
    }
    
    button {
      width: 5ex;
      text-align: center;
      padding: 1px 3px;
    }
  </style>
</head>
<body>
  <fieldset id="editor" contenteditable="true">
    The quick brown fox jumped over the lazy dog.
  </fieldset>
  <fieldset>
    <button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
    </button>
    <button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
    </button>
    <button class="fontStyle" onclick="document.execCommand( 'underline',false,null);" title='Underline Highlighted Text'><u>U</u>
    </button>
  </fieldset>
</body>

</html>

note: according to the Mozilla docs as of now it's being made obsolete https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand — Daniel, Jul 27 '20 at 08:58

score 2 · Answer 2 · answered Jul 06 '16 at 07:22

2

Textarea does not allow such things. I would suggest you to use something like ckeditor. It will do the job for you neatly. But if you still want to do it yourself, you need to use a div with contenteditable tag.

Good Luck !

answered Jul 06 '16 at 07:22

kawadhiya21

2,458
21
34

Amani Ben Azzouz · Answer 3 · 2016-07-06T07:51:16.300

With textarea you cannot achieve that, use divs instead, so you can do something like this:

$(document).ready(function(){
$('.boldText').click(function(){
   $('.container').toggleClass("bold");
});
$('.italicText').click(function(){
  $('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
  $('.container').toggleClass("underline");
});



});

div.container {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 5px;
}
.bold{
  font-weight:bold;
}
.italic{
  font-style :italic;
}
.underline{
 text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">

How to make selected text bold/italic/underlined in javascript?

3 Answers3

SNIPPET

Linked