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

Решение Мэтта Болла хорошо, но если у вас есть абзац с изображением, разметкой или цитатами, регулярное выражение не просто потерпит неудачу, но нарушит 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 для назначения дополнительных стилей первой букве в абзаце.Вот демоверсия: http://jsfiddle.net/e4XY2/. Он должен работать во всех современных браузерах, кроме IE7.

Answer 4

У меня, похоже, нет разрешения отвечать на ответ, так что прости меня за то, что я так поступил. Ответ, данный Мэттом Боллом, не будет работать, если P содержит другой элемент в качестве первого потомка. Идите к скрипке и добавьте IMG (очень часто) в качестве первого потомка P, а I из Img превратится в буквицу.

Answer 5

Если вы используете параметр x (не уверен, поддерживается ли он в jQuery), вы можете заставить скрипт игнорировать пробелы в шаблоне.Затем используйте что-то вроде этого:

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

Вы знаете, в каком формате должен быть ваш первый персонаж, и он должен захватывать только этот символ в группу.Если перед первой буквой у вас могут быть другие символы, кроме пробелов, возможно, что-то вроде этого:

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

Сначала вы можете условно перехватить другие символы, а затем захватить первую букву в группу, которую затем можно обернутьтег span.