jQuery 在圖片和文字中插入內容（多種情況考慮）

来源:https://www.cnblogs.com/joe235/archive/2023/04/25/17348943.html
-Advertisement-
Play Games

昨天接到一個新的需要，在後臺文章編輯器中，每一個文章的正文前面，可以單獨添加一個電頭欄位，但是如果在富文本編輯器中最上面就添加圖片的話，圖片就會把電頭和正文中的文字給隔開。需要做的是獲取到電頭欄位，然後在正文中的文字部分的最前面插入電頭欄位。具體看下圖： 原始的代碼： <div class="det ...


昨天接到一個新的需要，在後臺文章編輯器中，每一個文章的正文前面，可以單獨添加一個電頭欄位，但是如果在富文本編輯器中最上面就添加圖片的話，圖片就會把電頭和正文中的文字給隔開。需要做的是獲取到電頭欄位，然後在正文中的文字部分的最前面插入電頭欄位。具體看下圖：

原始的代碼：

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

我開始的思路是：迴圈遍歷p標簽，把第一個p標簽中的span標簽刪除並提取出來，然後在第2個p標簽的最前面，把提取出來的span標簽拆入進去。再重新渲染出來。

需要註意的一點是，每段文字開頭都有空格，而電頭插入進來後和後面的文字之間不能有空格，所以還要把第一段開頭的空格過濾掉，然後再插入電頭，同時電頭左側也需要空兩個格。

$(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 id="detail_header">' + '　　' + span.html() + '</span>' +$(this).html().replace( /^\s*/, '') + '</p>')
            } else {
                arr.push('<p>' +$(this).html() + '</p>')
            }
        });
        var jsonString = arr.join('');
        detail.html(jsonString)
})

效果：可以看到需求實現了

 

但是又有了一個新的問題，因為不能保證用戶在編輯器裡面會插入幾張圖片，如果插入多個圖片，那麼就不一定是第2個p標簽中有文字，所以上面的代碼就不能用了。

還有一個噁心的地方在於，每一個圖片不一定是在一個單獨的p標簽裡面，如果用戶插入一張圖片後，按了回車，那麼就會生成一個p標簽；如果用戶插入一張圖片以後沒有回車，而是直接輸入了文字，那麼圖片和文字就會在一個p標簽裡面。

例如下麵代碼：

<div class="detail_txt">
    <p>　　<span id="detail_header"><b>XXXXX網訊（某某某）</b></span><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg" width="500" height="300"></p>
    <p><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg" width="500" height="300">　　強冷空氣這幾天正在影響我國，大部地區經歷激烈冷暖轉換。這個時節為什麼還會出現如此大幅度的降溫？氣溫起伏大容易誘發哪些疾病？哪些人群應該重點註意身體？今天的春日健康帖帶大家一起瞭解。</p>
    <p>　　這幾天，強冷空氣影響我國，北方大部地區氣溫下降明顯，多地最高氣溫僅個位數。同時，山西、陝西等積雪較深的地區仍有雨雪天氣。西南地區東部到長江中下游一帶不少地方最高氣溫降到15℃左右，寒涼程度仿佛退回了常年3月上中旬。</p>
    <p>　　為什麼4月下旬還會出現如此大幅度的降溫？</p>
    <p>　　中央氣象臺首席預報員孫軍表示，我國4月份出現這種較強冷空氣過程，還是比較多的。我國春季冷暖空氣相對活躍，此時冷空氣強度往往會更強一些。冷空氣來臨前，我國大部地區受暖濕氣流控制，氣溫上升較快，溫度也相對較高。隨著冷空氣到來，降溫幅度就會比較大。</p>
    <p><br></p>
</div>

新的思路：先把第一個p標簽中的span標簽刪除並提取出來，然後迴圈p標簽，判斷哪些裡面包含中文（註意，這個時候第一個p標簽裡面已經沒有了中文，因為前面已經把span標簽刪除掉了），獲取到第一個包含中文的p標簽的索引值，然後再獲取到該p標簽中的內容。判斷裡面是否包含img標簽，包含的話，就把img標簽和文字中間插入前面提取出來的電頭；不包含的話，就直接在開頭插入前面提取出來的電頭。（還要註意清除掉文字開頭的空格，併在電頭前補空格）

遇到幾個問題：

1、在img標簽和文字中間插入電頭的時候遇到了點問題，我開始是準備獲取最後一個img標簽的“>”字元位置，在下一個位置中插入電頭欄位，然後整段內容用正則清除空格。

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

這個正則是去除所有空格，會把img標簽里的空格也都去掉，就像這樣：

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

然後換成去除左空格

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

先獲取了最後一個img標簽的“>”字元位置，然後清除文字左側空格，後面在插入電頭的時候發現：插入的索引位置有偏差。

這個顛倒一下就可以，先清除文字左側空格，然後再獲取最後一個img標簽的“>”字元位置。索引位置的問題解決了。

2、發現用去除左空格的正則，去不掉圖片和文字中間的空格，類似這樣：

想了一個笨方法：把img標簽都提取出來，再把文字都提取出來並清除左側空格，然後把這兩個部分再重新組合在一起。或者也可以把img標簽刪除並提取出來，把剩下的文字用正則去除左側空格，再把img標簽再插入回來。

第一個方法：

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

第二個方法：

// 取img標簽
var end = pStr.html().lastIndexOf('>')
var imgStr = pStr.html().substring(0, end + 1);
 // 取文字
var txtStr = pStr.html().replace(imgStr, '')
// 把img和文字重新整合，並刪除文字的左側空格
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 id="detail_header"><b>XXXXX網訊（某某某）</b></span><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg" width="500" height="300"></p>
    <p><img src="http://www.news.cn/local/2023-04/24/1212170844_16823002967291n.jpg" width="500" height="300">　　強冷空氣這幾天正在影響我國，大部地區經歷激烈冷暖轉換。這個時節為什麼還會出現如此大幅度的降溫？氣溫起伏大容易誘發哪些疾病？哪些人群應該重點註意身體？今天的春日健康帖帶大家一起瞭解。</p>
    <p>　　這幾天，強冷空氣影響我國，北方大部地區氣溫下降明顯，多地最高氣溫僅個位數。同時，山西、陝西等積雪較深的地區仍有雨雪天氣。西南地區東部到長江中下游一帶不少地方最高氣溫降到15℃左右，寒涼程度仿佛退回了常年3月上中旬。</p>
    <p>　　為什麼4月下旬還會出現如此大幅度的降溫？</p>
    <p>　　中央氣象臺首席預報員孫軍表示，我國4月份出現這種較強冷空氣過程，還是比較多的。我國春季冷暖空氣相對活躍，此時冷空氣強度往往會更強一些。冷空氣來臨前，我國大部地區受暖濕氣流控制，氣溫上升較快，溫度也相對較高。隨著冷空氣到來，降溫幅度就會比較大。</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 id="detail_header">' + '　　' + 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')
        // 獲取第一個P
        var pFirst = $('.detail_txt p:first-child');
        // 刪除span標簽
        pFirst.find("span").remove()
        // console.log('0', detail.html())
        var arr = []
        // 存儲P中帶中文.
        var pNum = []
        detail.children().each(function(i) {
            var str = $(this).html();
            // 判斷P中帶中文的
            if( str.match(/[\u4E00-\u9FA5]+/) ){
                pNum.push(i)
            }
            // 逐條添加到數組
            arr.push('<p>' +$(this).html() + '</p>')
        });
        // 第一個包含中文的p
        var num = pNum[0]
        // 取第一個包含中文的p的內容
        var pStr = $('.detail_txt p:nth-of-type( ' + (num+1) + ')');
        // 判斷p中是否包含img標簽
        var img = pStr.find('img').length;
        // console.log('img',img)
        if (img) {
            // 取img標簽
            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和文字重新整合，並刪除文字的左側空格
            var newStr = imgStr + txtStr.replace( /^\s*/, '')
            // 取整合後的img最右標簽位置
            var index = newStr.lastIndexOf('>')
            // console.log(newStr)
            // 在圖片和文字中間插入電頭
            pStr = insertStr(newStr, index + 1, '<span id="detail_header">' + '　　' + span.html() + '</span>')
            // console.log(pStr)
        } else {
            // 沒有圖片就直接插入電頭，並刪除文字的左側空格
            pStr = '<span id="detail_header">' + '　　' + 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存入數租
        arr[num] = '<p>'+pStr+'</p>'
        // console.log('111',arr[num])
        // 數組轉字元串
        var jsonString = arr.join('');
        // 重新渲染到頁面
        detail.html(jsonString)

    })
    </script> 

</body> 
</html>

最終效果圖：

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

補充下：編輯剛反饋，電頭有的時候會添加，有時候不會添加，所以在最開始還要加一個判斷：

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

}

重新優化了一下代碼：

    // 獲取電頭欄位
    var span = $('.detail_txt #detail_header')
    // 判斷是否有電頭
    if (span.length != 0) {
        var detail = $('.detail_txt')
        // 獲取第一個P
        var pFirst = $('.detail_txt p:first-child');
        // 刪除span標簽
        pFirst.find("span").remove()
        // 存儲P中帶中文
        var pNum = []
        detail.children().each(function(i) {
            var str = $(this).html();
            // 判斷P中帶中文的
            if( str.match(/[\u4E00-\u9FA5]+/) ){
                pNum.push(i)
            }
        });
        // 第一個包含中文的p
        var num = pNum[0]
        // 取第一個包含中文的p的內容
        var pStr = $('.detail_txt p:nth-of-type( ' + (num+1) + ')');
        // 判斷p中是否包含img標簽
        var img = pStr.find('img').length;
        // console.log('img',img)
        if (img) {
            // 取img標簽
            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和文字重新整合，並刪除文字的左側空格
            var newStr = imgStr + txtStr.replace( /^\s*/, '')
            // 取整合後的img最右標簽位置
            var index = newStr.lastIndexOf('>')
            // console.log(newStr)
            // 在圖片和文字中間插入電頭
            pStr = insertStr(newStr, index + 1, '<span id="detail_header">' + '　　' + span.html() + '</span>')
            // console.log(pStr)
        } else {
            // 沒有圖片就直接插入電頭，並刪除文字的左側空格
            pStr = '<span id="detail_header">' + '　　' + 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>')
    }

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android Studio虛擬機文件預設C盤轉移其他盤
    原文地址:Android Studio虛擬機文件預設C盤轉移其他盤 - Stars-One的雜貨小窩 某天發現,新創建的Android13模擬器,把我C盤搞得只剩下9G了,於是折騰了下,把模擬器相關文件移動到其他盤去了 步驟 其實步驟也挺簡單的,模擬器的文件在C:\Users\你的用戶名\.andr ...
  • ios apns推送 離線鎖屏語音播報
    一、背景 公司正在研發的一款App，需要在進行消息推送時支持語音播報。 具體要求： 離線：App在用戶未打開時，可收到消息推送 鎖屏：用戶在設備鎖屏狀態下，仍可收到消息推送 語音播報：收到消息推送時可同時進行語音播放 蘋果的APNs消息推送, 支持在應用未打開及設備鎖屏狀態下收到推送。 而同時進行語 ...
  • 用戶訂閱付費如何拆解分析？看這篇就夠了
    會員制的訂閱付費在影音娛樂行業中已相當普及，近幾年，不少游戲廠商也開始嘗試訂閱收費模式。在分析具體的用戶訂閱偏好以及訂閱付費模式帶來的增長效果時，我們常常會有這些疑問： 如何從用戶的整體付費行為中具體拆解訂閱付費事件並分析？ 想要瞭解當前應用內用戶的整體訂閱概況？ 訂閱用戶和非訂閱用戶在留存與付費偏 ...
  • 【谷歌插件開發】獲取當前網站COOKIE並上報HTTP-API
    由於本人每天需要登錄網站查看數據並分析統計彙總，而每次機械式地搜索和簡單計算，十分繁瑣。我們可以寫個定時任務，每天根據cookie獲取網站數據並遍歷統計。 腳本得以成功執行的關鍵是需要獲取到COOKIE 故，寫了個谷歌插件用來上報COOKIE ...
  • 記錄-因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 背景 最近在項目中要實現一個拖拽頭像的移動效果，一直對JS Dom拖拽這一塊不太熟悉，甚至在網上找一個示例，都看得雲里霧裡的，發現遇到最大的攔路虎就是JS Dom各種各樣的距離，讓人頭暈眼花，看到一個距離屬性，大腦中的印象極其模糊，如同有 ...
  • 如何解決Gridea部分主題不渲染Katex的問題
    很多好看的主題因為對象不是信息學，所以忽視了公式，即 $\LaTeX$ 。 導致，如果你想渲染一個 $n$ ，結果成了 nn ...
  • 帶你瞭解關於FastAPI快速開發Web API項目中的模板和Jinja
    摘要：FastAPI 實際上是為構建 API 和微服務而設計的。它可用於構建使用 Jinja 提供 HTML 服務的 Web 應用程式。 本文分享自華為雲社區《FastAPI 快速開發 Web API 項目: 模板和 Jinja 介紹》，作者：宇宙之一粟。 什麼是 Jinja 模板是全棧 Web 開 ...
  • 瞭解一下XSS
    XSS，即跨站腳本攻擊（Cross-Site Scripting），是一種常見的網路安全漏洞，攻擊者通過在網頁中註入惡意腳本代碼，使得瀏覽器執行這些腳本，從而控制網頁上的內容或者獲取用戶的敏感信息。XSS 攻擊一般分為反射型、存儲型和 DOM 型三種類型。 1. 反射型 XSS 攻擊 反射型 XSS ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類