jQuery 在图片和文字中插入内容（多种情况考虑）

昨天接到一个新的需要，在后台文章编辑器中，每一个文章的正文前面，可以单独添加一个电头字段，但是如果在富文本编辑器中最上面就添加图片的话，图片就会把电头和正文中的文字给隔开。需要做的是获取到电头字段，然后在正文中的文字部分的最前面插入电头字段。具体看下图：

原始的代码：

<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 + 2)

// 把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')

        // console.log(span.html())

        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 + 2)

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

最终效果图：

终于搞定了，记录下以便后期参考。大家有什么好的方法建议，欢迎给我留言。

jQuery 在图片和文字中插入内容（多种情况考虑）的更多相关文章

CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
VSTO 向office文档中插入内容
原文:VSTO 向office文档中插入内容 Word: Word.Selection sec = ThisAddIn.appWord.Selection; sec.Insert ...
jQuery左侧图片右侧文字滑动切换代码
分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div cla ...
向ueditor中插入内容
html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" nam ...
Javascript和jQuery WordPress 图片轮播插件，内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
css3在页面中插入内容
A．使用选择器来插入内容 h2:before{ content:"前缀"; } h2:after{ content:"后缀"; } B．指定个别的元素不进行 ...
cat命令在文件中插入内容
eg: cat>> xxx <<EOFinsert 1insert 2 EOF
使用jquery清空input 文本框中的内容
只需要将文本框的值置为空即可: function resetBtn(){ $("#name").val(""); }
CorelDRAW X7软件中如何将图片剪贴到文字中
将图片剪贴到文字中是平面设计常用的一种处理方法之一,将图片剪贴到文字中是指将图片置入到该文字,且图片的外轮廓是沿着文字的形状剪贴的,这种处理手法被广泛应用于排版设计中.本教程将带大家了解如何用Cor ...
iOS开发富文本制作图片和文字/NSMutableParagraphStyle／NSMutableAttributedString
/NSMutableParagraphStyle/NSMutableAttributedString 组合使 NSString * titlestr=@"日产GT-R"; NSMu ...

随机推荐

Java基础知识题
在Java语言中,已知 a 为int 型,b 为 double型,c 为 float 型,d 为 char 型,则表达式 a+b*c-d/a 的结果类型为(选一项)A.intB.doubleC.fl ...
实践课：i至诚app案例分析---江洁兰
这个作业属于哪个课程至诚软工实践F班这个作业要求在哪里作业要求这个作业的目标分析产品软件,找出其中的问题并进行分析,提高对产品软件bug方面的认识学号 212106715 第一部分找Bu ...
005Java开发环境搭建
005Java开发环境搭建 1.JDK下载与安装 (1)卸载首先我们先来学习一下如何卸载JDK. 删除Java的安装目录(jdk整个包). 删除环境变量里的"JAVA_HOME" ...
常用的typedef 定义
今天开始学习VC++基础,系统编程栏目下都是WinAPI和MFC的内容,此为浏览博客园时学习的一篇文章,觉得很实用,拿来做笔记. 出处见最底部. 三行代码: typedef char CHAR ...
element ui el-date-picker format 和 value-format 格式不一致，会导致日期输入框不显示
element ui el-date-picker和value-format 不一致导致输入框不显示
微信支付服务商api对接
引入官方sdk  < ...
使用 netstat 命令监视网络状态
在linux 系统网络出现问题时可以使用netstat -s 来分析问题使用 netstat 命令监视网络状态 netstat 命令生成包含网络状态和协议统计信息的显示内容.可以通过表格形式显示 T ...
avx
编译选项: CXXFLAGS += -mavx2 #include <immintrin.h> #include <cmath> void reset_xy(int *x, i ...
What Are You Weighting For?
A basic strength routine can change your life Strength training isn't just about getting six-pack ab ...
6. 基础查（会员信息） - 创建查询Web Api - 配置Table Permission
Power Portal中的Web API可以对门户页面中所有的Microsoft Dataverse实体进行创建.更新和删除操作.我们可以直接使用门户Web API对产品创建新客户.更新联系人或 ...

jQuery 在图片和文字中插入内容（多种情况考虑）

jQuery 在图片和文字中插入内容（多种情况考虑）的更多相关文章

随机推荐

热门专题