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

news2024/11/25 20:34:50

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

<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>')
     }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/459883.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一款纯Web化免费SQL工具,重新定义数据库管理

一款纯Web化免费SQL工具,重新定义数据库管理

SQL Studio是一款由麦聪软件研发的多数据库管理工具&#xff0c;提供Windows、Linux 和 MacOS三种版本的软件包&#xff0c;支持中英文两种语言。SQL Studio是用Java编写的&#xff0c;默认使用 JDK 8进行编译。 下载看这里: [SQLStudio] (http://www.maicongs.com/#/home/web)…
阅读更多...
shell脚本function传参的使用

shell脚本function传参的使用

这里直接上操作来说明function 的传参 新建一个脚本 vi 1.sh #!/bin/bash function check_a {echo $2echo $3echo "this is check_a" } function check_b {echo $2echo "this is check_b" } $1 #$1作为选择执行哪个function的参数 执行以下这个脚本传…
阅读更多...
测试不够快？试试这招！让pytest多进程/多线程执行测试用例，轻松提升测试效率！

测试不够快？试试这招！让pytest多进程/多线程执行测试用例，轻松提升测试效率！

目录&#xff1a;导读 前言&#xff1a; 多进程执行用例之pytest-xdist pytest-xdist分布式测试的原理&#xff1a; pytest-xdist分布式测试的流程&#xff1a; 多线程执行用例之pytest-parallel 常用参数配置 pytest-parallel与pytest-xdist对比说明: 结语 前言&#…
阅读更多...
vue修改当前页面query参数

vue修改当前页面query参数

最近在项目中手写分页器&#xff08;为什么手写&#xff0c;因为对分页器样式外观要求比较严苛&#xff09;&#xff0c;遇到一个需求&#xff0c;就是我们在点击分页的时候&#xff0c;再进入详情&#xff0c;之后回退希望能够回到之前的页码值。 解决这个需求&#xff0c;个…
阅读更多...
研报精选230425

研报精选230425

目录 【行业230425华金证券】电子行业动态分析&#xff1a;23Q1电子板块环比略微下降&#xff0c;半导体设备重仓持股显著上升 【行业230425中泰证券】电力设备与新能源行业周报&#xff1a;特斯拉一季度储能收入高增&#xff0c;宁德时代发布凝胶态电池 【行业230425长城国瑞证…
阅读更多...
行业分析| 视频监控——AI自动巡检

行业分析| 视频监控——AI自动巡检

随着视频监控的普及&#xff0c;现在很多社区、工地、车间、厂区、超市、商铺、酒店、餐馆等场所都安装了视频监控系统。当安装的视频监控出现故障时&#xff0c;我们该如何进行简单的视频故障识别呢&#xff1f;如果只依靠人工对视频故障识别排查&#xff0c;工作量是相当大的…
阅读更多...
动态规划猜法中外部信息简化的相关问题（上）

动态规划猜法中外部信息简化的相关问题（上）

文章目录 1、Leetcode 312.戳气球&#xff08;困难&#xff09;1.1 题目描述1.2 思路分析1.3 代码实现1.4 启示 2、Leetcode 546.移除盒子&#xff08;困难&#xff09;2.1 题目描述2.2 思路分析2.3 代码实现 3、消除字符3.1 题目描述3.2 思路分析3.3 代码实现 1、Leetcode 312…
阅读更多...
ARM buildroot 的引入

ARM buildroot 的引入

一、X210 的 bsp 介绍 1、嵌入式 linux 产品的 bsp 介绍 (1) 大部分的 ARM 架构的 linux 平台的 bsp 的内容和结构都是相似的。 (2) bsp 一般是芯片厂家/板卡厂家提供的。 2、X210 的 linuxQT bsp 整体介绍 (1) tslib_x210_qtopia.tgz 是用来支持 QT 的触摸屏操作的应用层库。…
阅读更多...
操作系统笔记——绪论

操作系统笔记——绪论

第一章绪论 1.1 操作系统的基本概念 1.1.1计算机硬件的基本组成 &#xff08;冯 ~诺伊曼模型&#xff09; &#xff0c;由运算器&#xff0c;存储器&#xff0c;控制器&#xff0c;输入设备&#xff0c;输出设备组成。 引入操作系统的目的&#xff1a;提供一个计算机用户与…
阅读更多...
【2. 初学ROS，年轻人的第一个Node节点】

【2. 初学ROS，年轻人的第一个Node节点】

【2. 初学ROS&#xff0c;年轻人的第一个Node节点】 1. 工作空间设置2. 创建Package3. 回访依赖包4. 创建Node节点5. 源码编译6. 运行Node节点7. Node节点完善8. 总结 本教程是B站阿杰视频的笔记 视频地址&#xff1a;https://www.bilibili.com/video/BV1nG411V7HW 超声波传感器…
阅读更多...
streamx平台部署

streamx平台部署

一. streamx介绍 StreamPark 总体组件栈架构如下&#xff0c; 由 streampark-core 和 streampark-console 两个大的部分组成 , streampark-console 是一个非常重要的模块, 定位是一个综合实时数据平台&#xff0c;流式数仓平台, 低代码 ( Low Code ), Flink & Spark 任务托…
阅读更多...
【PWN刷题__ret2shellcode】[HNCTF 2022 Week1]ret2shellcode

【PWN刷题__ret2shellcode】[HNCTF 2022 Week1]ret2shellcode

本蒟蒻的ret2shellcode的开篇之作&#xff01; 第一次实战ret2shellcode&#xff0c;该类型的简单题但是也研究了很久! 目录 前言 一、checksec查看二进制文件​ 二、查找后门函数 三、IDA反汇编 bss段 mprotect()函数 四、GDB调试 GDB基本的一些用法 偏移量计算 五…
阅读更多...
OpenSearch图搜图、文搜图向量检索最佳实践

OpenSearch图搜图、文搜图向量检索最佳实践

一、向量检索介绍 1.1 多模态信息的典型特点-非结构化 信息可以被划分为两大类&#xff1a;当信息能够用数据或统一的结构加以表示&#xff0c;称之为结构化数据&#xff1b;当信息无法用数字或统一的结构表示&#xff0c;称之为非结构化数据。非结构数据与结构化数据相比较而…
阅读更多...
Rockchip芯片单板适配OpenHarmony的方法

Rockchip芯片单板适配OpenHarmony的方法

Rockchip芯片单板适配OpenHarmony的方法 1 整体思路 OpenHarmony是一个上层用户操作系统&#xff0c;在设计上希望兼容不同的底层系统。针对于L2的Linux标准设备&#xff0c;OpenHarmony对Linux、Uboot等底层系统没有太多的依赖&#xff0c;并且在驱动方面&#xff0c;HDF也兼…
阅读更多...
蓝桥杯省一经验+考试流程+技巧分享

蓝桥杯省一经验+考试流程+技巧分享

今年拿了省一&#xff0c;开心&#xff0c;我渡梦酒也可以拿奖奖啦。 我对整体参赛流程还是比较熟悉了&#xff0c;给大家留下一点值得参考的东西~。 这篇纯纯经验和技巧分享&#xff0c;请放心食用~ 目录 考试流程 考试代码怎么提交 考完结束需要做什么 做题小技巧&#xf…
阅读更多...
适合学生党的蓝牙耳机品牌有哪些？性价比高的无线耳机推荐

适合学生党的蓝牙耳机品牌有哪些？性价比高的无线耳机推荐

相较于有线耳机&#xff0c;蓝牙耳机的受欢迎程度可谓是越来越高&#xff0c;当然&#xff0c;这也离不开部分手机取消耳机孔的设计。最近看到很多网友问&#xff0c;适合学生党的蓝牙耳机品牌有哪些&#xff1f;针对这个问题&#xff0c;我来给大家推荐几款性价比高的无线耳机…
阅读更多...
VR全景摄影，全景VR展示模式

VR全景摄影，全景VR展示模式

目前&#xff0c;全景概念已经被大众熟知&#xff0c;很多行业尤其是房产、汽车等已经开始大批量使用全景展示的方式提高获客率和推广率。VR全景摄影以全景摄影技术为基础&#xff0c;结合虚拟现实技术&#xff0c;可以让用户身临其境&#xff0c;沉浸式地感受虚拟环境。 一、V…
阅读更多...
【 Spring AOP 】

【 Spring AOP 】

文章目录 一、什么是 Spring AOP&#xff1f;二、为什要⽤ AOP&#xff1f;三、AOP 的组成四、Spring AOP 的实现五、Spring AOP 实现原理 一、什么是 Spring AOP&#xff1f; AOP&#xff08;Aspect Oriented Programming&#xff09;&#xff1a;⾯向切⾯编程&#xff0c;它…
阅读更多...
【Linux常见指令以及权限理解】基本指令（2）

【Linux常见指令以及权限理解】基本指令（2）

写在前面 今天我们继续学习Linux的基本指令&#xff0c; 这里是上一篇博客的链接&#xff1a;http://t.csdn.cn/9AgHP 接下来我会继续讲解Linux指令相关内容。 目录 写在前面 1. man 描述&#xff1a; 用法&#xff1a; 例子&#xff1a; 例1&#xff1a; 例2&#…
阅读更多...
MC9S12G128开发板—实现按键发送CAN报文指示小车移动功能

MC9S12G128开发板—实现按键发送CAN报文指示小车移动功能

实验环境&#xff1a;MC9S12G128开发板 基本功能&#xff1a;控制开发板上的按键&#xff0c;模拟车辆移动的上下左右四个方位&#xff0c;通过can通信告诉上位机界面&#xff0c;车辆轨迹的移动方位。 1. 1939报文发送的示例代码 MC9S12G128开发板1939协议发送can报文数据的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023