Question

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

＆＃13;

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

＆＃13;

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>

＆＃13;

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

你可以试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

使用JavaScript更改所选文本的字体

3 个答案: