jQuery 匹配字符串中的第一個字母並用 span 標簽換行

Question

我正在嘗試獲取段落中的第一個字母並用<span>標簽包裝它。 請注意，我說的是字母而不是字符，因為我正在處理經常有空格的混亂標記。

現有標記（我無法編輯）：

<p>  Actual text starts after a few blank spaces.</p>

期望的結果：

<p>  <span class="big-cap">A</span>ctual text starts after a few blank spaces.</p>

我如何忽略除/[a-zA-Z]/之外的任何內容？ 任何幫助將不勝感激。

Answer 1

$('p').html(function (i, html)
{
    return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
});

Answer 2

Matt Ball 的解決方案很好，但如果你的段落有圖像或標記或引用，則正則表達式不僅會失敗，還會破壞 html

<p><strong>Important</strong></p>
    or
<p>"Important"</p>

在這些情況下，您可以避免破壞 html，方法是在滲出的初始字符中添加“'<。盡管在這種情況下，第一個字符上不會有跨度。

 return html.replace(/^[^a-zA-Z'"<]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');

我認為最理想的情況是，您可能希望在 ' 或 " 之后包裝第一個字符，但是我認為最好不要包裝該字符，如果它已經在標記中，但這可能需要第二次替換試驗。

Answer 3

我會投票反對使用 JS 來完成這項任務。 它會使您的頁面變慢，並且使用 JS 進行演示也是一種不好的做法。

相反，我可以建議使用:first-letter偽類將額外的 styles 分配給段落中的第一個字母。 這是演示： http://jsfiddle.net/e4XY2/ 。 它應該適用於除 IE7 之外的所有現代瀏覽器。

Answer 4

我似乎無權回復答案，所以請原諒我這樣做。 如果 P 包含另一個元素作為第一個子元素，則 Matt Ball 給出的答案將不起作用。 Go 到小提琴並添加一個 IMG（非常常見）作為 P 的第一個孩子，來自 Img 的 I 將變成一個首字下沉。

Answer 5

如果您使用 x 參數（不確定 jQuery 是否支持它），您可以讓腳本忽略模式中的空格。 然后使用這樣的東西：

/^([a-zA-Z]).*$/

你知道你的第一個字符應該是什么格式，它應該只把那個字符抓到一個組中。 如果您的第一個字母之前可以有除空格以外的其他字符，可能是這樣的：

/.*?([a-zA-Z]).*/

首先有條件地捕獲其他字符，然后將第一個字母捕獲到一個組中，然后您可以將其環繞一個 span 標簽。