如何以斜体显示输出的一部分 - JavaScript

Question

网上和这个网站上有很多关于制作斜体字体的问题，但没有提到如何只将字符串的一部分变为斜体。

就我而言，有一个表格，我输入书名、作者姓名和售出数量。单击按钮后，我希望作者姓名和销售数量正常，但书名在文本区域（输出）中以斜体显示。

表格编码：

<label for="txtName">Author Name</label>
<input type="text" id="txtName" size="50" placeholder="Eg, Darwin" maxlength="50">

<label for="txtTitle">Book Title</label>
<input type="text" id="txtTitle" size="40" placeholder="Eg, The Origin of Species" style="font-style:italic" maxlength="100">

<label for="txtNumber">Number Sold</label>
<input type="text" id="txtNumber" size="4" placeholder="Eg, 50000" maxlength="9">

当用户输入书名时，他们键入的标题看起来是斜体，但值不会保持为斜体。在最后完成所需的计算后，我想要按此顺序显示的标题、作者和数字：

bTitle = bookForm.txtTitle.value;
bName = bookForm.txtName.value;
bNumber = bookForm.txtNumber.value;

concatBook = bTitle+" by "+bName+" sold "+bNumber+" Copies."

此 concatBook 将通过函数显示在文本区域中。

我唯一想用斜体显示的是 bTitle。

感谢您阅读我的问题

Answer 1

要添加斜体样式（或任何您想要的样式），您需要将您想要样式的文本包装在 span 标记中。但是您不能在textarea 中插入 HTML。您应该改用<div contenteditable="true"></div>。

看看这个minimal demo。

HTML：

<div contenteditable="true"></div>

CSS：

span{
    font-style: italic;
}

JavaScript：

var concatBook = "<span>by</span> sold Copies."
$('div').html(concatBook);