如何以斜体显示部分输出 - 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);

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

how to make part of an output in italic - JavaScript

html

javascript

jquery

italic

output