jQuery?在圖片和文字中插入內(nèi)容實(shí)例

更新時(shí)間：2023年06月09日 08:21:46 作者：JoeYoung

jQuery是一種流行的JavaScript庫(kù)，可以輕松地在網(wǎng)頁(yè)中插入圖片和文字。通過(guò)使用jQuery的插入功能，您可以在網(wǎng)頁(yè)上動(dòng)態(tài)地添加內(nèi)容，從而提高用戶體驗(yàn)。本文將介紹如何使用jQuery在圖片和文字中插入內(nèi)容，并提供一些實(shí)用的代碼示例。

昨天接到一個(gè)新的需要，在后臺(tái)文章編輯器中，每一個(gè)文章的正文前面，可以單獨(dú)添加一個(gè)電頭字段，但是如果在富文本編輯器中最上面就添加圖片的話，圖片就會(huì)把電頭和正文中的文字給隔開(kāi)。需要做的是獲取到電頭字段，然后在正文中的文字部分的最前面插入電頭字段。具體看下圖：

原始的代碼：

<div class="detail_txt">
<p>　　<span><b>XXXXX網(wǎng)訊（某某某）</b></span><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg"></p>
<p>　　強(qiáng)冷空氣這幾天正在影響我國(guó)，大部地區(qū)經(jīng)歷激烈冷暖轉(zhuǎn)換。這個(gè)時(shí)節(jié)為什么還會(huì)出現(xiàn)如此大幅度的降溫？氣溫起伏大容易誘發(fā)哪些疾?。磕男┤巳簯?yīng)該重點(diǎn)注意身體？今天的春日健康帖帶大家一起了解。</p>
<p>　　這幾天，強(qiáng)冷空氣影響我國(guó)，北方大部地區(qū)氣溫下降明顯，多地最高氣溫僅個(gè)位數(shù)。同時(shí)，山西、陜西等積雪較深的地區(qū)仍有雨雪天氣。西南地區(qū)東部到長(zhǎng)江中下游一帶不少地方最高氣溫降到15℃左右，寒涼程度仿佛退回了常年3月上中旬。</p>
<p>　　為什么4月下旬還會(huì)出現(xiàn)如此大幅度的降溫？</p>
<p>　　中央氣象臺(tái)首席預(yù)報(bào)員孫軍表示，我國(guó)4月份出現(xiàn)這種較強(qiáng)冷空氣過(guò)程，還是比較多的。我國(guó)春季冷暖空氣相對(duì)活躍，此時(shí)冷空氣強(qiáng)度往往會(huì)更強(qiáng)一些。冷空氣來(lái)臨前，我國(guó)大部地區(qū)受暖濕氣流控制，氣溫上升較快，溫度也相對(duì)較高。隨著冷空氣到來(lái)，降溫幅度就會(huì)比較大。</p>
<p><br></p>
</div>

我開(kāi)始的思路是：循環(huán)遍歷p標(biāo)簽，把第一個(gè)p標(biāo)簽中的span標(biāo)簽刪除并提取出來(lái)，然后在第2個(gè)p標(biāo)簽的最前面，把提取出來(lái)的span標(biāo)簽拆入進(jìn)去。再重新渲染出來(lái)。

需要注意的一點(diǎn)是，每段文字開(kāi)頭都有空格，而電頭插入進(jìn)來(lái)后和后面的文字之間不能有空格，所以還要把第一段開(kāi)頭的空格過(guò)濾掉，然后再插入電頭，同時(shí)電頭左側(cè)也需要空兩個(gè)格。

$(function() {
        var span = $('.detail_txt #detail_header')   
        var detail = $('.detail_txt')
        var pFirst = $('.detail_txt p:first-child');
        pFirst.find("span").remove()
        var arr = []
        detail.children().each(function(i) {
            if (i == 1){
                arr.push('<p><span>' + '　　' + span.html() + '</span>' +$(this).html().replace( /^\s*/, '') + '</p>')
            } else {
                arr.push('<p>' +$(this).html() + '</p>')
            }
        });
        var jsonString = arr.join('');
        detail.html(jsonString)
})

效果：可以看到需求實(shí)現(xiàn)了

但是又有了一個(gè)新的問(wèn)題，因?yàn)椴荒鼙ＷC用戶在編輯器里面會(huì)插入幾張圖片，如果插入多個(gè)圖片，那么就不一定是第2個(gè)p標(biāo)簽中有文字，所以上面的代碼就不能用了。

還有一個(gè)惡心的地方在于，每一個(gè)圖片不一定是在一個(gè)單獨(dú)的p標(biāo)簽里面，如果用戶插入一張圖片后，按了回車(chē)，那么就會(huì)生成一個(gè)p標(biāo)簽；如果用戶插入一張圖片以后沒(méi)有回車(chē)，而是直接輸入了文字，那么圖片和文字就會(huì)在一個(gè)p標(biāo)簽里面。

例如下面代碼：

<div class="detail_txt">
    <p>　　<span><b>XXXXX網(wǎng)訊（某某某）</b></span><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg"></p>
    <p><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg">　　強(qiáng)冷空氣這幾天正在影響我國(guó)，大部地區(qū)經(jīng)歷激烈冷暖轉(zhuǎn)換。這個(gè)時(shí)節(jié)為什么還會(huì)出現(xiàn)如此大幅度的降溫？氣溫起伏大容易誘發(fā)哪些疾病？哪些人群應(yīng)該重點(diǎn)注意身體？今天的春日健康帖帶大家一起了解。</p>
    <p>　　這幾天，強(qiáng)冷空氣影響我國(guó)，北方大部地區(qū)氣溫下降明顯，多地最高氣溫僅個(gè)位數(shù)。同時(shí)，山西、陜西等積雪較深的地區(qū)仍有雨雪天氣。西南地區(qū)東部到長(zhǎng)江中下游一帶不少地方最高氣溫降到15℃左右，寒涼程度仿佛退回了常年3月上中旬。</p>
    <p>　　為什么4月下旬還會(huì)出現(xiàn)如此大幅度的降溫？</p>
    <p>　　中央氣象臺(tái)首席預(yù)報(bào)員孫軍表示，我國(guó)4月份出現(xiàn)這種較強(qiáng)冷空氣過(guò)程，還是比較多的。我國(guó)春季冷暖空氣相對(duì)活躍，此時(shí)冷空氣強(qiáng)度往往會(huì)更強(qiáng)一些。冷空氣來(lái)臨前，我國(guó)大部地區(qū)受暖濕氣流控制，氣溫上升較快，溫度也相對(duì)較高。隨著冷空氣到來(lái)，降溫幅度就會(huì)比較大。</p>
    <p><br></p>
</div>

新的思路：先把第一個(gè)p標(biāo)簽中的span標(biāo)簽刪除并提取出來(lái)，然后循環(huán)p標(biāo)簽，判斷哪些里面包含中文（注意，這個(gè)時(shí)候第一個(gè)p標(biāo)簽里面已經(jīng)沒(méi)有了中文，因?yàn)榍懊嬉呀?jīng)把span標(biāo)簽刪除掉了），獲取到第一個(gè)包含中文的p標(biāo)簽的索引值，然后再獲取到該p標(biāo)簽中的內(nèi)容。判斷里面是否包含img標(biāo)簽，包含的話，就把img標(biāo)簽和文字中間插入前面提取出來(lái)的電頭；不包含的話，就直接在開(kāi)頭插入前面提取出來(lái)的電頭。（還要注意清除掉文字開(kāi)頭的空格，并在電頭前補(bǔ)空格）

遇到幾個(gè)問(wèn)題：

1、在img標(biāo)簽和文字中間插入電頭的時(shí)候遇到了點(diǎn)問(wèn)題，我開(kāi)始是準(zhǔn)備獲取最后一個(gè)img標(biāo)簽的“>”字符位置，在下一個(gè)位置中插入電頭字段，然后整段內(nèi)容用正則清除空格。

str = str.replace(/\s+/g,''); // 去除所有空格

這個(gè)正則是去除所有空格，會(huì)把img標(biāo)簽里的空格也都去掉，就像這樣：

<img src="http://www.xxx.cn/local/2023-04/24/1212170844_16823002967291n.jpg" width="500" height="300">

然后換成去除左空格

str = str.replace( /^\s*/, '');  // 去除左空格

先獲取了最后一個(gè)img標(biāo)簽的“>”字符位置，然后清除文字左側(cè)空格，后面在插入電頭的時(shí)候發(fā)現(xiàn)：插入的索引位置有偏差。

這個(gè)顛倒一下就可以，先清除文字左側(cè)空格，然后再獲取最后一個(gè)img標(biāo)簽的“>”字符位置。索引位置的問(wèn)題解決了。

2、發(fā)現(xiàn)用去除左空格的正則，去不掉圖片和文字中間的空格，類(lèi)似這樣：

想了一個(gè)笨方法：把img標(biāo)簽都提取出來(lái)，再把文字都提取出來(lái)并清除左側(cè)空格，然后把這兩個(gè)部分再重新組合在一起。或者也可以把img標(biāo)簽刪除并提取出來(lái)，把剩下的文字用正則去除左側(cè)空格，再把img標(biāo)簽再插入回來(lái)。

第一個(gè)方法：

// 取img標(biāo)簽
var begin = pStr.html().indexOf('<')  // 這行可以不要，下面直接從0開(kāi)始
var end = pStr.html().lastIndexOf('>')
var imgStr = pStr.html().substring(begin,end + 1); // (0,end + 1)
// 取文字
var txtStr = pStr.html().substring(end + 1)
// 把img和文字重新整合，并刪除文字的左側(cè)空格
var newStr = imgStr + txtStr.replace( /^\s*/, '')

第二個(gè)方法：

// 取img標(biāo)簽
var end = pStr.html().lastIndexOf('>')
var imgStr = pStr.html().substring(0, end + 1);
 // 取文字
var txtStr = pStr.html().replace(imgStr, '')
// 把img和文字重新整合，并刪除文字的左側(cè)空格
var newStr = imgStr + txtStr.replace( /^\s*/, '')

大家有什么其他更好的方法，可以給我留言，謝謝。

下面貼下完整代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>在圖片和文字中間插入電頭</title> 
    <script src="/js/jquery.min.js"></script>
  <style>
    img{display: block;}
  </style>
</head> 
<body> 
  <div class="detail_txt">
    <p>　　<span><b>XXXXX網(wǎng)訊（某某某）</b></span><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg"></p>
    <p><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg">　　強(qiáng)冷空氣這幾天正在影響我國(guó)，大部地區(qū)經(jīng)歷激烈冷暖轉(zhuǎn)換。這個(gè)時(shí)節(jié)為什么還會(huì)出現(xiàn)如此大幅度的降溫？氣溫起伏大容易誘發(fā)哪些疾?。磕男┤巳簯?yīng)該重點(diǎn)注意身體？今天的春日健康帖帶大家一起了解。</p>
    <p>　　這幾天，強(qiáng)冷空氣影響我國(guó)，北方大部地區(qū)氣溫下降明顯，多地最高氣溫僅個(gè)位數(shù)。同時(shí)，山西、陜西等積雪較深的地區(qū)仍有雨雪天氣。西南地區(qū)東部到長(zhǎng)江中下游一帶不少地方最高氣溫降到15℃左右，寒涼程度仿佛退回了常年3月上中旬。</p>
    <p>　　為什么4月下旬還會(huì)出現(xiàn)如此大幅度的降溫？</p>
    <p>　　中央氣象臺(tái)首席預(yù)報(bào)員孫軍表示，我國(guó)4月份出現(xiàn)這種較強(qiáng)冷空氣過(guò)程，還是比較多的。我國(guó)春季冷暖空氣相對(duì)活躍，此時(shí)冷空氣強(qiáng)度往往會(huì)更強(qiáng)一些。冷空氣來(lái)臨前，我國(guó)大部地區(qū)受暖濕氣流控制，氣溫上升較快，溫度也相對(duì)較高。隨著冷空氣到來(lái)，降溫幅度就會(huì)比較大。</p>
    <p><br></p>
  </div>
  <script>
    $(function() {
        // var span = $('.detail_txt #detail_header')
        // console.log(span.html())
        // var detail = $('.detail_txt')
        // var pFirst = $('.detail_txt p:first-child');
        // pFirst.find("span").remove()
        // console.log('0', detail.html())
        // var arr = []
        // detail.children().each(function(i) {
        //     if (i == 1){
        //         arr.push('<p><span>' + '　　' + span.html() + '</span>' +$(this).html().replace( /^\s*/, '') + '</p>')
        //     } else {
        //         arr.push('<p>' +$(this).html() + '</p>')
        //     }
        // });
        // console.log(arr)
        // var jsonString = arr.join('');
        // console.log(jsonString);
        // detail.html(jsonString)
        // 獲取電頭字段
        var span = $('.detail_txt #detail_header')
        var detail = $('.detail_txt')
        // 獲取第一個(gè)P
        var pFirst = $('.detail_txt p:first-child');
        // 刪除span標(biāo)簽
        pFirst.find("span").remove()
        // console.log('0', detail.html())
        var arr = []
        // 存儲(chǔ)P中帶中文.
        var pNum = []
        detail.children().each(function(i) {
            var str = $(this).html();
            // 判斷P中帶中文的
            if( str.match(/[\u4E00-\u9FA5]+/) ){
                pNum.push(i)
            }
            // 逐條添加到數(shù)組
            arr.push('<p>' +$(this).html() + '</p>')
        });
        // 第一個(gè)包含中文的p
        var num = pNum[0]
        // 取第一個(gè)包含中文的p的內(nèi)容
        var pStr = $('.detail_txt p:nth-of-type( ' + (num+1) + ')');
        // 判斷p中是否包含img標(biāo)簽
        var img = pStr.find('img').length;
        // console.log('img',img)
        if (img) {
            // 取img標(biāo)簽
            var begin = pStr.html().indexOf('<')
            var end = pStr.html().lastIndexOf('>')
            var imgStr = pStr.html().substring(begin,end + 1); // (0, end + 1)
            // console.log('imgStr',imgStr)
            // 取文字
            var txtStr = pStr.html().substring(end + 1)
            //var txtStr = pStr.html().replace(imgStr, '')
            // console.log('txtStr',txtStr)
            // 把img和文字重新整合，并刪除文字的左側(cè)空格
            var newStr = imgStr + txtStr.replace( /^\s*/, '')
            // 取整合后的img最右標(biāo)簽位置
            var index = newStr.lastIndexOf('>')
            // console.log(newStr)
            // 在圖片和文字中間插入電頭
            pStr = insertStr(newStr, index + 1, '<span>' + '　　' + span.html() + '</span>')
            // console.log(pStr)
        } else {
            // 沒(méi)有圖片就直接插入電頭，并刪除文字的左側(cè)空格
            pStr = '<span>' + '　　' + span.html() + '</span>' + pStr.html().replace( /^\s*/, '')
        }
        // console.log('pStr',pStr)
        // souece 原字符串 start 要截取的位置 newStr 要插入的字符
        function insertStr(source, start, newStr) {
            return source.slice(0, start) + newStr + source.slice(start)
        }
        // console.log('aer',arr)
        // 整合插入后的P存入數(shù)租
        arr[num] = '<p>'+pStr+'</p>'
        // console.log('111',arr[num])
        // 數(shù)組轉(zhuǎn)字符串
        var jsonString = arr.join('');
        // 重新渲染到頁(yè)面
        detail.html(jsonString)
    })
    </script> 
</body> 
</html>

最終效果圖：

終于搞定了，記錄下以便后期參考。大家有什么好的方法建議，歡迎給我留言。

補(bǔ)充下：編輯剛反饋，電頭有的時(shí)候會(huì)添加，有時(shí)候不會(huì)添加，所以在最開(kāi)始還要加一個(gè)判斷：

// 判斷是否有電頭
if (span.length != 0) {
}

重新優(yōu)化了一下代碼：

    // 獲取電頭字段
    var span = $('.detail_txt #detail_header')
    // 判斷是否有電頭
    if (span.length != 0) {
        var detail = $('.detail_txt')
        // 獲取第一個(gè)P
        var pFirst = $('.detail_txt p:first-child');
        // 刪除span標(biāo)簽
        pFirst.find("span").remove()
        // 存儲(chǔ)P中帶中文
        var pNum = []
        detail.children().each(function(i) {
            var str = $(this).html();
            // 判斷P中帶中文的
            if( str.match(/[\u4E00-\u9FA5]+/) ){
                pNum.push(i)
            }
        });
        // 第一個(gè)包含中文的p
        var num = pNum[0]
        // 取第一個(gè)包含中文的p的內(nèi)容
        var pStr = $('.detail_txt p:nth-of-type( ' + (num+1) + ')');
        // 判斷p中是否包含img標(biāo)簽
        var img = pStr.find('img').length;
        // console.log('img',img)
        if (img) {
            // 取img標(biāo)簽
            var begin = pStr.html().indexOf('<')
            var end = pStr.html().lastIndexOf('>')
            var imgStr = pStr.html().substring(begin,end + 1);
            // console.log('imgStr',imgStr)
            // 取文字
            // var txtStr = pStr.html().substring(end + 1)
            var txtStr = pStr.html().replace(imgStr, '')
            // console.log('txtStr',txtStr)
            // 把img和文字重新整合，并刪除文字的左側(cè)空格
            var newStr = imgStr + txtStr.replace( /^\s*/, '')
            // 取整合后的img最右標(biāo)簽位置
            var index = newStr.lastIndexOf('>')
            // console.log(newStr)
            // 在圖片和文字中間插入電頭
            pStr = insertStr(newStr, index + 1, '<span>' + '　　' + span.html() + '</span>')
            // console.log(pStr)
        } else {
            // 沒(méi)有圖片就直接插入電頭，并刪除文字的左側(cè)空格
            pStr = '<span>' + '　　' + span.html() + '</span>' + pStr.html().replace( /^\s*/, '')
        }
        // souece 原字符串 start 要截取的位置 newStr 要插入的字符
        function insertStr(source, start, newStr) {
            return source.slice(0, start) + newStr + source.slice(start)
        }
        $('.detail_txt p:nth-of-type( ' + (num+1) + ')').html('<p>'+pStr+'</p>')
    }

本文介紹了如何使用jQuery在網(wǎng)頁(yè)中插入圖片和文字。通過(guò)使用jQuery的插入功能，您可以輕松地動(dòng)態(tài)地添加內(nèi)容，從而提高用戶體驗(yàn)。本文提供了一些實(shí)用的代碼示例，幫助您更好地理解如何使用jQuery插入內(nèi)容。如果您想提高網(wǎng)站的交互性和用戶體驗(yàn)，那么學(xué)習(xí)如何使用jQuery插入內(nèi)容是非常重要的。

到此這篇關(guān)于jQuery 在圖片和文字中插入內(nèi)容實(shí)例的文章就介紹到這了,更多相關(guān)jQuery 在圖片和文字中插入內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: