使用jquery用span元素替换单个字母换行

Question

我需要替换div内容中的第一个字母并用<span>标签包装它.

这是我的HTML:

<div class="first_ltr">
    <p>This is a Test </p>
</div>

我想以下列形式替换html:

<div class="first_ltr">
    <p><span>T</span>his is a Test </p>
</div>

我试过了:

$(".first_ltr").each(function () {
    var currentText = $(this).html();
    $(this).text(currentText.replace("0","<span></span>"));
});

任何人都可以帮忙吗？在此先感谢您的帮助.

Answer 1

您可以传递给.html回调,并将任何标记添加到文本中,就像这样

$('.first_ltr p').html(function (index, html) {
  return '<span>' + html.slice(0, 1) + '</span>' + html.slice(1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first_ltr">
  <p>This is a Test </p>
</div>

html.slice(0, 1) - 返回字符串中的第一个字母

html.slice(1) - 返回没有首字母的字符串

更新 我写过小插件,你可以尝试一下

$.fn.wrapText = function (tag, position) {
    var $contaiter = $('<div />');

    this.html(function (index, html) {
        var start = position;
            end   = position + 1;

        if (position > html.length) {
            position = 0;
        }

        $contaiter.html($('<' + tag + '/>').html(html.slice(start, end)));

        return [html.slice(0, start), $contaiter.html(), html.slice(end)].join('');
    });
};

$('.first_ltr p').wrapText('span', 0);
$('.last_ltr p').wrapText('div', 13);

例