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

Example

Answer 2

检查以下代码。检查DEMO

第一个选项

 $(".first_ltr").each(function () {
    var currentText = $.trim($(this).text());
    var firstChar = currentText.charAt(0);
    currentText = currentText.substring(1, currentText.length);
   $(this).find('p').html('<span>'+firstChar+'</span>'+currentText);
 });

使用slice检查DEMO

的第二个选项

  $(".first_ltr").each(function () {
     var currentText = $.trim($(this).text()); 
     $(this).find('p').html('<span>'+currentText.slice(0,1)+'</span>'+currentText.slice(1));
  });

Answer 3

不是最短的解决方案，但它适用于每个文本：

var $span = $('<span />');
$(".first_ltr > p").each(function(){
    var firstLetter = $(this).text().slice(0,1); //find first letter
    var text = $(this).text().slice(1); //find rest of the text 
    $span.text(firstLetter); //wrap first letter in span-tag
    $(this).text(text); //override old text
    $(this).prepend($span); //prepend first letter
});

Demo

Answer 4

这样的事情对你有用。

var text = $('.first_ltr p').text();
var split = text.split('');
var firstLetter = split[0];
var rest = split.splice(1,split.length)
$('.first_ltr p').html('<span>' + firstLetter +'</span>' + rest.join(''));

https://jsfiddle.net/d1pf6cjy/1/

Answer 5

这是一个可能的解决方案：

$(document).ready(function(){
    var myText = $('.first_ltr > p').text();
    var start = '<span>' + myText.slice(0,1) + '</span>';
    var end = myText.slice(1, myText.length);
    $('.first_ltr > p').html(start + end);
});

演示：http://jsfiddle.net/r2zp2vqm/1/

希望有所帮助！

Answer 6

我的第一次回答尝试相当天真：

$(".first_ltr p:first").each(function () {
    var currentText = $(this).html();
    $(this).html(currentText.replace(/(.)/,"<span>$1</span>"));
});

答案有多个问题：

如果<p>不存在，它会中断。
如果标签嵌套在<p>内（可能包裹标签的<），它会更加突破。
如果第一个字符是例如。它将包裹它的空间。

为了解决这些问题，这里有一个很大改进的尝试：

我们手动搜索DOM以获取第一个非空文本节点
如果找到，请修改文本节点并直接在包装的字母前插入范围。

＆＃13;

var validLetters = "a-zA-Z";

var rgx = new RegExp( "^([\\s\\S]*?)([" + validLetters + "])" );

$(".first_ltr").each( function() {
    // 1) Find the first text node
    var node = $(this);
    
    while( node.contents().length ) {
        node = node
          .contents()
          .filter(function() {
              return $(this).text().match(rgx);
          }).first();
    }
    
    // 2) Make sure it is a text node
    if( node.length && node[0].nodeType === 3 )
    {
        // 3) Get first valid character
        var firstLetter = $(node).text().match(rgx);
        
        // 4) Remove it from the old text
        node[0].nodeValue = $(node).text().substring(firstLetter[0].length);
        
        // 5) Add the span
        $(node).before(firstLetter[1] + "<span>" + firstLetter[2] + "</span>");
    }
});

＆＃13;

span { background: yellow; }

＆＃13;

<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>

＆＃13;

对于像OP这样的简单案例，这可能是矫枉过正，但对其他案件则更灵活。

这是一个包含更多测试用例的小提琴：https://jsfiddle.net/abfsefpz/2/

Answer 7

使用此：

Jquery的前置方法

$( ".first_ltr" ).prepend( "<span>T</span>" );

Click Here For more Info

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

7 个答案: