使用JavaScript更改所選文本的字體

Question

當突出顯示div中的特定文本時，如何更改字體。 當我從保管箱中選擇一種字體時，下面的代碼將更改整個文本的字體。

 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

試圖增強Ankit的答案，
這是一種不使用replace()函數的解決方案。

Ankit解決方案的問題在於，如果重復出現某個文本，則替換該文本的首次出現。
例如，當文本為“ abc abc”時，我們選擇了第二個，即第一個更改了其字體的文本。

⋅⋅⋅

下面的代碼段使用所選的文本和所選的字體創建一個新的html元素，然后刪除所選內容並將新元素插入其位置：
（請參見代碼中的注釋）

 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> 

請注意，不需要添加jQuery。
（OP在他們的問題中沒有使用它）

希望對您有所幫助。

Answer 2

您需要使用window.getSelection()從div獲取選定的文本，並且由於您只願意更改突出顯示的文本，因此可以用<span>元素包圍突出顯示的文本，然后將font-family css應用於該文本。 <span> 。 此<span>元素將保留突出顯示的文本，因此font-family將僅更改為該突出顯示的文本。

 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

您可以嘗試以下方法：

 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>