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>');
});

演示：http://jsfiddle.net/mattball/t3DNY/

Answer 2

我会投票反对使用JS来完成这项任务。它会使你的页面变慢，并且使用JS进行演示也是一种不好的做法。

相反，我建议使用:first-letter伪类为段落中的第一个字母指定其他样式。以下是演示：http://jsfiddle.net/e4XY2/。它应该适用于除IE7之外的所有现代浏览器。

Answer 3

Matt Ball的解决方案很好但是如果你的段落和图像或标记或引号正则表达式不会失败但会打破html 例如

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

你可以通过在exuded的初始字符中添加“'＆lt;来避免在这些情况下破坏html。虽然在这种情况下，第一个字符上不会包含任何跨度。

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

我认为最好你可能希望在'或'之后包装第一个字符 但是我认为如果它已经在标记中，最好不要包装该角色，但这可能需要第二次替换试验。

Answer 4

我似乎没有回复答案的许可，请原谅我这样做。如果P包含另一个元素作为第一个孩子，那么Matt Ball给出的答案将不起作用。去小提琴并添加一个IMG（很常见）作为P的第一个孩子，Img的I将变成一个下降帽。

Answer 5

如果使用x参数（不确定jQuery是否支持），则可以让脚本忽略模式中的空格。然后使用这样的东西：

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

你知道你的第一个角色应该采用什么格式，并且它应该只将该角色抓取到一个组中。如果你在第一个字母之前可以有空格以外的其他字符，可能是这样的：

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

首先有条件地捕获其他字符，然后将第一个字母捕获到一个组中，然后可以将其包裹在span标记中。