jQuery匹配字符串中的第一个字母并用span标签换行答案

【问题标题】：jQuery match first letter in a string and wrap with span tagjQuery匹配字符串中的第一个字母并用span标签换行
【发布时间】：2011-10-06 21:45:30
【问题描述】：

我正在尝试获取段落中的第一个字母并用 <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]/ 之外，我如何忽略任何内容？任何帮助将不胜感激。

【问题讨论】：

如果出现以下html：<p> 15346 Actual text starts after a few blank spaces, and numbers.</p>，A 应该还是被包裹，还是应该没有包裹？
不应发生包装，尽管您描述的情况不太可能发生。不过好点。

【解决方案1】：

Matt Ball 的解决方案很好，但如果你的段落有图像或标记或引号，正则表达式不仅会失败，还会破坏 html 比如

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

在这些情况下，您可以通过在渗出的初始字符中添加 "'

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

我认为您最好将第一个字符包装在 ' 或 " 之后但是，如果字符已经在标记中，我会认为最好不要换行，但这可能需要第二次替换试验。

【讨论】：

【解决方案2】：

我似乎无权回复答案，所以请原谅我这样做。如果 P 包含另一个元素作为第一个子元素，则 Matt Ball 给出的答案将不起作用。转到小提琴并添加一个 IMG（非常常见）作为 P 的第一个孩子，来自 Img 的 I 将变成一个首字下沉。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

Doesn't seem to work, if non-alpha characters appear first。我的假设是，如果发生这种情况，他仍然希望将A 包裹在一个跨度中，而不是什么都不包裹在一个跨度中......我的假设当然可能是无效的。 =/
@David 我刚刚编辑了正则表达式，但你基本上仍然是对的。问题是（在您的示例中）应该包装 1 或 A 吗？根据 OP，我理解答案是 A，而不是 1。不过，调整起来很容易。
好吧，我认为从1 应该（至少“可能”）不被包装（毕竟它不是AZ）的问题中很清楚，而是是否应该有任何包装，或不...也许OP可以提供一些清晰度？
对正则表达式的改进：[a-zA-Z] 与[A-z] 相同。如果您想忽略空格，请使用\s。删除 g 标志，因为您只关心第一场比赛。这就是它的样子：/^\s*([A-z])/.
如另一个答案中所述，如果 IMG 等子 HTML 标签位于第一个位置，则此解决方案会中断：jsfiddle.net/g6dbssst

【解决方案5】：

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

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

你知道你的第一个字符应该是什么格式，它应该只把那个字符抓到一个组中。如果您的第一个字母之前可以有除空格以外的其他字符，可能是这样的：

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

有条件地先捕获其他字符，然后将第一个字母捕获到一个组中，然后您可以将其环绕一个 span 标签。

【讨论】：