使用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>