如何在文本区更改特定文本的字体样式，而不是整个文本

你不能对textarea字段这样做，因为你只能在HTML元素中设置样式。你必须使用具有contenteditable属性的元素，并在HTML格式中设置样式，以自定义你想要的输入样式。

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

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

回答有点晚，但对人还是有用的。"textarea"很难是很难风格，所以你可以选择"div";与"contenteditable"财产。第一个HTML:

<div id="textAreaContainer">
<div id='myTextArea' contenteditable autofocus></div>
<button type="button" id="myButton">Click Me for Style</button>
</div>

然后，1)抓取div的内容，2)根据你的需要拆分它，3)为你想要的部分添加样式，并将其导出到div区域。Javascript:

document.getElementById("myButton").addEventListener("click", myFunction);
function myFunction(){
const insertedText = document.getElementById("myTextArea").innerHTML;
const insertedTextCount = insertedText.length;
const partText1 = insertedText.substring(0, 100);
const partText2 = insertedText.substring(100, insertedTextCount);
document.getElementById("myTextArea").innerHTML = partText1+'<span style="font-weight: bold;">'+partText2+"</span>";
return;
};

所以，第一次点击将按计划工作，但没有刷新页面的任何后续点击将使文本区内容复杂化。如果希望后续单击能够很好地更新文本区域的样式部分，则需要再编写一行代码。它将在设置样式之前清除文本区域内不可见的span标签。添加如下所示的代码行，并对第一个变量的名称做一个小更改:

const insertedText0 = document.getElementById("myTextArea").innerHTML;
const insertedText = insertedText0.replace(/<span.*>/gi, "n");
const insertedTextCount = insertedText.length;