如何更改特定文本的字体样式而不是 textarea 中的整个文本

Question

我想做一个类似在线 txt 编辑器的东西。 问题是当我尝试应用document.getElementById("textArea").style.fontWeight="bold"; ，整个文本区域变为粗体。我只想要文本，而粗体切换为粗体，我猜想像微软字。 问题：如何更改 textarea 中特定文本的字体样式。 我是初学者，所以我只知道如何使用 javascript 和 jquery。
HTML

<button onclick="Bold()"><h3>Bold</h3></button>
<textarea id="textArea" class="Textarea" placeholder="Click to Type" cols="50"></textarea>

Javascript

function Bold(){
  if (document.getElementById("textArea").style.fontWeight=="bold"){
    document.getElementById("textArea").style.fontWeight=null;
  }
  else{
    document.getElementById("textArea").style.fontWeight="bold";
  }
}

Answer 1

您不能使用textarea字段执行此操作，因为您只能在 HTML 元素中设置 styles 。 您必须使用具有contenteditable属性的元素并将样式设置为 HTML 格式，以按照您想要的方式自定义输入样式。

例子：

<div id="textarea" contenteditable="true">
    <b style="color: red">My bold text in red.</b> =)
</div>

您可以使用 JavaScript 从contenteditable字段中获取值：

<script type="text/javascript">
    var textarea = document.getElementById("textarea"); // contenteditable element
    var textarea_value = textarea.innerHTML; // contenteditable element value

   // getting specific text, here we are getting the bold text
   var bold_element = textarea.querySelectorAll('b')[0].innerHTML;
</script>