如何在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。

感谢阅读我的问题。

- user5030211

---

JavaScript不会保留文本样式。您需要使用HTML标签和/或CSS（例如输入字段）来实现。有关更多信息，请参见此处https://dev59.com/_nI95IYBdhLWcg3w3yJU，以及此处https://dev59.com/vnfZa4cB1Zd3GeqPQ2PN。 - Jasen

可以尝试使用Javascript方法italics() http://www.w3schools.com/jsref/jsref_italics.asp - NightOwlPrgmr

Answer 1

要添加斜体样式（或其他想要的样式），您需要将要样式化的文本包裹在标签中。但是您不能在标签内插入HTML代码。相反，您应该使用< div contenteditable="true"> </ div>标签。</p> <p>请查看此<strong><a href="https://jsfiddle.net/lmgonzalves/p0rheftz/" rel="nofollow">演示</a></strong>。</p> <p>HTML：</p> <pre class="guess-CSS"><code><div contenteditable="true"></div> </code></pre> <p>CSS：</p> <pre class="guess-CSS"><code>span{ font-style: italic; } </code></pre> <p>JavaScript：</p> <pre class="guess-JavaScript"><code>var concatBook = "<span>by</span> sold Copies." $('div').html(concatBook); </code></pre>

- lmgonzalves

---

谢谢回复。但是这里有一个问题，它显示的是“by”这个单词的斜体格式，而不是它所代表的值。例如，如果bTitle保存了书的标题，“<span>bTitle</span>” 显然会显示斜体的 bTitle 而不是它所代表的值。 - user5030211

我想做的是使bTitle的值变成斜体。 - user5030211

我的答案是一个“最小例子”。在你的情况下，你可以这样做：concatBook = "<span>"+bTitle+"</span> by "+bName+" sold "+bNumber+" Copies."。查看新演示。 - lmgonzalves

@aryazdani 我为你感到高兴！ - lmgonzalves

它完美地运行，但我有一个新的问题！它没有调用 DisplayHarvardBook(concatBook)，它在新页面中显示结果，而不是在 DisplayHarvardBook() 中定义的文本区域中。 - user5030211