如何用JavaScript将textarea中部分文本设置为粗体？

哦，我明白问题出在哪了！你用的text2.bold()确实会生成带<b>标签的字符串，但<textarea>元素只能显示纯文本，它不会解析HTML标签——所以你看到的只会是Lorem ipsum <b>dolor sit amet</b>, consectetur adipiscing elit.这样的文本，而不是预期的加粗效果。

解决办法：用可编辑元素替代<textarea> #

如果你的需求是在页面上直接显示加粗的文本，推荐使用带有contenteditable="true"属性的<div>或<p>标签，这类元素可以解析并渲染HTML内容。

修改后的代码如下：

JavaScript 代码

function myFunction(obj) {
  var text1 = "Lorem ipsum ";
  var text2 = "<strong>dolor sit amet</strong>"; // 直接用strong标签，或者调用text2.bold()也能得到相同结果
  var text3 = ", consectetur adipiscing elit.";
  obj.innerHTML = text1 + text2 + text3; // 用innerHTML而非value来设置HTML内容
}

HTML 代码

<div contenteditable="true" onmouseup="myFunction(this)">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

为什么原来的代码不生效？ #

• String.prototype.bold()方法的作用是返回一个包含<b>标签的字符串，比如text2.bold()会得到<b>dolor sit amet</b>；
• 但<textarea>的value属性只会把传入的内容当作纯文本展示，不会解析任何HTML标记，所以标签会直接显示出来，不会产生加粗效果。

额外说明：如果必须用<textarea> #

如果你因为某些限制必须使用<textarea>，那只能通过Markdown语法（比如用**包裹需要加粗的内容）来标记加粗，之后再通过额外的渲染逻辑（比如转换为HTML）在其他地方显示加粗效果，但<textarea>本身还是只能显示纯文本标记。

内容的提问来源于stack exchange，提问作者John