Change font for selected text using JavaScript

Question

How can I change the font when I highlight a specific text from the div. The code below changes the font of the whole text when I select a font from my dropbox.

 function changeFont(font) { document.getElementById("note_header").style.fontFamily = font.value; } 

 Highlight text and change font <br> <select id="select_font" onchange="changeFont(this);"> <option value="Arial">Arial</option> <option value="Sans Serif" selected>Sans Serif</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Times New Roman">Times New Roman</option> <option value="Courier New">Courier New</option> <option value="Verdana">Verdana</option> <option value="Trebuchet MS">Trebuchet MS</option> <option value="Arial Black">Arial Black</option> <option value="Impact">Impact</option> <option value="Bookman">Bookman</option> <option value="Garamond">Garamond</option> <option value="Palatino">Palatino</option> <option value="Georgia">Georgia</option> </select> <div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc"> Some Content </div> 

Answer 1

Trying to enhance Ankit's answer,
Here is a solution that doesn't use the replace() function.

The issue with Ankit's solution is that the first occurence of a selected text was replaced in case of a text being repeated.
For example, when the text is "abc abc" and we selected the second one, that was the first one that got its font changed.

⋅ ⋅ ⋅

The snippet below creates a new html element with the selected text and the chosen font, then deletes the selection and inserts the new element at its place:
(See comments in the code)

 function changeFont(font) { var sel = window.getSelection(); // Gets selection if (sel.rangeCount) { // Creates a new element, and insert the selected text with the chosen font inside var e = document.createElement('span'); e.style = 'font-family:' + font.value + ';'; e.innerHTML = sel.toString(); // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt var range = sel.getRangeAt(0); range.deleteContents(); // Deletes selected text… range.insertNode(e); // … and inserts the new element at its place } } 

 .editable { width: 360px; height: 120px; border: 1px solid #ccc } 

 Highlight text and change font <br> <select id="select_font" onchange="changeFont(this);"> <option value="Arial">Arial</option> <option value="Sans Serif" selected>Sans Serif</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Times New Roman">Times New Roman</option> <option value="Courier New">Courier New</option> <option value="Verdana">Verdana</option> <option value="Trebuchet MS">Trebuchet MS</option> <option value="Arial Black">Arial Black</option> <option value="Impact">Impact</option> <option value="Bookman">Bookman</option> <option value="Garamond">Garamond</option> <option value="Palatino">Palatino</option> <option value="Georgia">Georgia</option> </select> <div contenteditable="true" class="editable"> Some Content </div> 

Note that jQuery isn't unnecessarily added.
(OP didn't used it in their question)

I hope it helps.

Answer 2

You need to use window.getSelection() to get the selected text from the div and since you are just willing to change the highlighted text so you can surround the highlighted text with <span> element and then apply the font-family css to that <span> . This <span> element will hold the highlighted text so the font-family will be changed to this highlighted text only.

 function changeFont(font) { var selectedText = ""; if (window.getSelection) { selectedText = window.getSelection().toString(); var newContent = $('#note_header').html().replace(selectedText, '<span style="font-family:'+font.value+';">'+selectedText+'</span>'); $('#note_header').html(newContent); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Highlight text and change font <br> <select id="select_font" onchange="changeFont(this);"> <option value="Arial">Arial</option> <option value="Sans Serif" selected>Sans Serif</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Times New Roman">Times New Roman</option> <option value="Courier New">Courier New</option> <option value="Verdana">Verdana</option> <option value="Trebuchet MS">Trebuchet MS</option> <option value="Arial Black">Arial Black</option> <option value="Impact">Impact</option> <option value="Bookman">Bookman</option> <option value="Garamond">Garamond</option> <option value="Palatino">Palatino</option> <option value="Georgia">Georgia</option> </select> <div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc"> Some Content </div> 

Answer 3

You can try this:

 function changeFont(font) { document.getElementById("note_header").style.fontFamily= font.value; document.getElementById("select_font").setAttribute( "style", "border: 1px solid red; outline: none"); } 

 <select id="select_font" onchange="changeFont(this);"> <option value="Arial">Arial</option> <option value="Sans Serif" selected>Sans Serif</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Times New Roman">Times New Roman</option> <option value="Courier New">Courier New</option> <option value="Verdana">Verdana</option> <option value="Trebuchet MS">Trebuchet MS</option> <option value="Arial Black">Arial Black</option> <option value="Impact">Impact</option> <option value="Bookman">Bookman</option> <option value="Garamond">Garamond</option> <option value="Palatino">Palatino</option> <option value="Georgia">Georgia</option> </select> <div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc"> Some Content </div>