使用JavaScript更改所选文字的字体 [英] Change font for selected text using JavaScript

问题描述

当我突出显示div中的特定文本时，如何更改字体。下面的代码在我从我的保管箱中选择一种字体时改变了整个文本的字体。

  function changeFont（font）{document.getElementById（note_header）。style.fontFamily = font.value;}  

 突出显示文本和更改字体< br>< select id =select_fontonchange =changeFont（this）;> < option value =Arial> Arial< / option> < option value =Sans Serifselected> 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 =影响>影响< / option> < option value =Bookman> Bookman< / option> < option value =Garamond> Garamond< / option> < option value =Palatino> Palatino< / option> < option value =Georgia>格鲁吉亚< / option> < / select>< div contenteditable =trueid =note_headerstyle =width：200px; height：200px; border：1px solid #ccc>有些内容< / div>  

解决方案

试图增强Ankit的答案，

这是一个不使用 replace（）函数的解决方案。

Ankit解决方案的问题在于，在重复文本的情况下，所选文本的第一次出现被替换。

例如，当文本是abc abc 并且我们选择了第二个，这是第一个改变了字体的字体。

⋅
⋅
⋅

下面的代码片段使用选定的文本和选定的字体创建一个新的html元素，然后删除选择并在其位置插入新元素：

在代码中）

function changeFont（font）{var sel = window。 G etSelection（）; //获取选择if（sel.rangeCount）{//创建一个新元素，并在选定的字体中插入选定的文本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（）; //删除选定的文本... range.insertNode（e）; // ...并将新元素插入到它的位置}}

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

突出显示文本和更改字体< br>< select id =select_fontonchange =changeFont（this）;> < option value =Arial> Arial< / option> < option value =Sans Serifselected> 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 =影响>影响< / option> < option value =Bookman> Bookman< / option> < option value =Garamond> Garamond< / option> < option value =Palatino> Palatino< / option> < option value =Georgia> Georgia< / option>< / select>< div contenteditable =trueclass =editable>一些内容< / div>

注意jQuery并不是不必要的
（OP在他们的问题中没有使用它）

我希望它有帮助。

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>

解决方案

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.

这篇关于使用JavaScript更改所选文字的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！