在一定數量的字符后在p內添加一個span標簽

Question

假設您的HTML有以下代碼：

<div class="contentBox"> 
    <p>I have some content that is good to read</p>
</div>

但是，您想在一定數量的字符之后添加一個span標記，比如說26個字符，該字符就在單詞“ that”之后。 結果將如下所示：

<div class="contentBox">
    <p>I have some content that<span> is good to read</span></p>
</div>

它必須在一定數量的字符之后，因為該段落會不時更改。

Answer 1

要設置span后，請設置字符數。 獲取p元素的文本。 從開始直到字符數量的子字符串，添加span ，繼續其余部分並添加close span

嘗試：

var after=26;
var html = $(".contentBox p").html();
html = html.substring(0, after) + "<span>" + html.substring(after)+"</span>";
$(".contentBox p").html(html);

演示

Answer 2

String.prototype.insertTextAtIndices = function (text) {
    return this.replace(/./g, function (char, index) {
        return text[index] ? text[index] + char : char;
    });
};
//usage
var range = {
    25: "<span style='color:red'>",
    40: "</span>"
};

document.getElementsByTagName("p")[0].innerHTML = document.getElementsByTagName("p")[0].innerHTML.insertTextAtIndices(range);

http://jsfiddle.net/4zx37Lhm/1/

Answer 3

您可以使用JavaScript的substr方法 。

 function addSpan($elems) { $elems.each(function() { var $elem = $(this), text = $elem.text(); if (text.length <= 25) return; var start = text.substr(0, 25), // "I have some content that " end = text.substr(25, text.length); // "is good to read" $elem.html(start + '<span>' + end + '</span>'); }); } addSpan($('.contentBox').find('p')); 

 span { color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="contentBox"> <p>I have some content that is good to read</p> </div> <div class="contentBox"> <p>I have some content that is good to read and this is a much longer string!</p> </div> 

Answer 4

試試這個：使用substring()獲取字符串的第一部分和第二部分，並使用span元素修改文本以將其放入p標簽的html中。

下面的函數將迭代contentBox div下的所有p ，但是如果僅定位一個div，則可以不使用.each()

$(function(){
    $('.contentBox p').each(function(){
      var text = $(this).text();
      var first = text.substring(0,26);
      var second = text.substring(26,text.length);
      $(this).html(first + '<span>' + second + '</span>');  
    });
});

演示