jQuery 在图片和文字中插入内容(多种情况考虑)
昨天接到一个新的需要,在后台文章编辑器中,每一个文章的正文前面,可以单独添加一个电头字段,但是如果在富文本编辑器中最上面就添加图片的话,图片就会把电头和正文中的文字给隔开。需要做的是获取到电头字段,然后在正文中的文字部分的最前面插入电头字段。具体看下图:
原始的代码:
XXXXX网讯(某某某)
强冷空气这几天正在影响我国,大部地区经历激烈冷暖转换。这个时节为什么还会出现如此大幅度的降温?气温起伏大容易诱发哪些疾病?哪些人群应该重点注意身体?今天的春日健康帖带大家一起了解。
这几天,强冷空气影响我国,北方大部地区气温下降明显,多地最高气温仅个位数。同时,山西、陕西等积雪较深的地区仍有雨雪天气。西南地区东部到长江中下游一带不少地方最高气温降到15℃左右,寒凉程度仿佛退回了常年3月上中旬。
为什么4月下旬还会出现如此大幅度的降温?
中央气象台首席预报员孙军表示,我国4月份出现这种较强冷空气过程,还是比较多的。我国春季冷暖空气相对活跃,此时冷空气强度往往会更强一些。冷空气来临前,我国大部地区受暖湿气流控制,气温上升较快,温度也相对较高。随着冷空气到来,降温幅度就会比较大。
我开始的思路是:循环遍历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("" + " " + span.html() + "" +$(this).html().replace( /^\s*/, "") + "
") } else { arr.push("" +$(this).html() + "
") } }); var jsonString = arr.join(""); detail.html(jsonString)})
效果:可以看到需求实现了
但是又有了一个新的问题,因为不能保证用户在编辑器里面会插入几张图片,如果插入多个图片,那么就不一定是第2个p标签中有文字,所以上面的代码就不能用了。
还有一个恶心的地方在于,每一个图片不一定是在一个单独的p标签里面,如果用户插入一张图片后,按了回车,那么就会生成一个p标签;如果用户插入一张图片以后没有回车,而是直接输入了文字,那么图片和文字就会在一个p标签里面。
例如下面代码:
XXXXX网讯(某某某)
强冷空气这几天正在影响我国,大部地区经历激烈冷暖转换。这个时节为什么还会出现如此大幅度的降温?气温起伏大容易诱发哪些疾病?哪些人群应该重点注意身体?今天的春日健康帖带大家一起了解。
这几天,强冷空气影响我国,北方大部地区气温下降明显,多地最高气温仅个位数。同时,山西、陕西等积雪较深的地区仍有雨雪天气。西南地区东部到长江中下游一带不少地方最高气温降到15℃左右,寒凉程度仿佛退回了常年3月上中旬。
为什么4月下旬还会出现如此大幅度的降温?
中央气象台首席预报员孙军表示,我国4月份出现这种较强冷空气过程,还是比较多的。我国春季冷暖空气相对活跃,此时冷空气强度往往会更强一些。冷空气来临前,我国大部地区受暖湿气流控制,气温上升较快,温度也相对较高。随着冷空气到来,降温幅度就会比较大。
新的思路:先把第一个p标签中的span标签删除并提取出来,然后循环p标签,判断哪些里面包含中文(注意,这个时候第一个p标签里面已经没有了中文,因为前面已经把span标签删除掉了),获取到第一个包含中文的p标签的索引值,然后再获取到该p标签中的内容。判断里面是否包含img标签,包含的话,就把img标签和文字中间插入前面提取出来的电头;不包含的话,就直接在开头插入前面提取出来的电头。(还要注意清除掉文字开头的空格,并在电头前补空格)
遇到几个问题:
1、在img标签和文字中间插入电头的时候遇到了点问题,我开始是准备获取最后一个img标签的“>”字符位置,在下一个位置中插入电头字段,然后整段内容用正则清除空格。
str = str.replace(/\s+/g,""); // 去除所有空格
这个正则是去除所有空格,会把img标签里的空格也都去掉,就像这样:
然后换成去除左空格
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*/, "")
大家有什么其他更好的方法,可以给我留言,谢谢。
下面贴下完整代码:
在图片和文字中间插入电头 <script src="/js/jquery.min.js"></script><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("XXXXX网讯(某某某)
强冷空气这几天正在影响我国,大部地区经历激烈冷暖转换。这个时节为什么还会出现如此大幅度的降温?气温起伏大容易诱发哪些疾病?哪些人群应该重点注意身体?今天的春日健康帖带大家一起了解。
这几天,强冷空气影响我国,北方大部地区气温下降明显,多地最高气温仅个位数。同时,山西、陕西等积雪较深的地区仍有雨雪天气。西南地区东部到长江中下游一带不少地方最高气温降到15℃左右,寒凉程度仿佛退回了常年3月上中旬。
为什么4月下旬还会出现如此大幅度的降温?
中央气象台首席预报员孙军表示,我国4月份出现这种较强冷空气过程,还是比较多的。我国春季冷暖空气相对活跃,此时冷空气强度往往会更强一些。冷空气来临前,我国大部地区受暖湿气流控制,气温上升较快,温度也相对较高。随着冷空气到来,降温幅度就会比较大。
" + " " + span.html() + "" +$(this).html().replace( /^\s*/, "") + "
") // } else { // arr.push("" +$(this).html() + "
") // } // }); // 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("" +$(this).html() + "
") }); // 第一个包含中文的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.html() + "") // console.log(pStr) } else { // 没有图片就直接插入电头,并删除文字的左侧空格 pStr = "" + " " + span.html() + "" + 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] = ""+pStr+"
" // console.log("111",arr[num]) // 数组转字符串 var jsonString = arr.join(""); // 重新渲染到页面 detail.html(jsonString) }) </script>
最终效果图:
终于搞定了,记录下以便后期参考。大家有什么好的方法建议,欢迎给我留言。
标签:
上一篇:当前关注:意甲-佩莱格里尼破门 罗马1-3亚特兰大跌出欧冠区
下一篇:最后一页
- jQuery 在图片和文字中插入内容(多种情况考虑)
- 当前关注:意甲-佩莱格里尼破门 罗马1-3亚特兰大跌出欧冠区
- 世界快资讯丨濮阳移动科技赋能助力智慧养老
- 挖掘赏花经济“美”的价值
- 全球消息!西班牙官员:援乌“豹2”主战坦克将在数天内抵乌
- 共创自有品牌 李佳琦们的新生意
- 着力培养高素质乡土人才
- 环球快资讯:4月24日基金净值:广发诚享混合A最新净值0.6937,跌2.39%
- 中国邮政集团有限公司白银市分公司保洁服务外包项目(第一期)成交结果公告 全球看热讯
- 三星双清能清掉三星帐号吗 三星双清_天天头条
- 凝聚睦邻“小家”,共创文明“大家”!他们携手创建活力楼组
- 接下来要防中字头倒戈|环球观天下
- 妙可蓝多:4月24日融券卖出金额115.98万元,占当日流出金额的1.75%|环球视讯
- 陆家嘴锦绣云澜——价格, 户型丨楼盘测评
- 临近五一部分民宿“涨价毁约” 多平台回应将承担换房差价-环球即时
- 长沙发出规范价格行为提醒告诫书
- 三原法院协助异地法院成功拘传被执行人
- 感受那个年代年轻人的精神
- 焦点播报:楞严咒读诵版 初学者_楞严咒读诵
- 宋伟龙_宋伟
- 天天微资讯!现代传播广播电视传播:电视新闻摄像_关于现代传播广播电视传播:电视新闻摄像介绍
- 环球热头条丨〔今日生肖运势〕2023年4月26日属相小运与特吉生肖
- 今日初生牛犊不怕虎下一句搞笑_初生牛犊不怕虎下一句
- 全国人民代表大会制度的组织基础是
- 浪潮KaiwuDB携工业物联网场景解决方案亮相山东省数字化转型论坛_今头条
- 立中集团:2022年净利润同比增36.53% 加快锂钠电池新材料项目建设
- 环球新动态:帝欧家居2022年营业收入41.12亿元 同比下降33.11%
- 每日信息:日本经济为何会出现“失去的十年”?这,对中国经济有何启示?
- 前沿资讯!智能机器人老婆男用_老婆同时和三个男做
- 庞大集团拟回购股份 上交所:是否有履约能力?是否在炒作股价
- 共进股份:预计首季净利润7600.00万元~8000.00万元 同比增51.18%~59.13% 环球即时
- 全球今日报丨望城:高标准万亩农田陆续投入使用
- 我国未成年人阅读能力平稳提升 阅读率和阅读量均较往年有所增加
- 陈凯歌:倾全力拍好《志愿军》
- 世界速读:老菜场首届国潮京剧节,4月29日不见不散~
- 光伏98.9% 西藏仅73.1%!2023年2月全国新能源并网消纳情况
- 拜登为何还不官宣参加2024总统大选?有四个原因
- 微动态丨注意!海口发布冰雹橙色预警
- 环球百事通!想用一张图征服朋友圈?去这些火车站打卡吧
- 2023济宁五一车展在哪里?
- 2023劳动节假期河南省加班工资怎么算?
- 观点:阿联两画面引动容!赛后拍主场+落寞离场!深夜难眠,致歉球迷!
- 视焦点讯!【游戏攻略】 三国吧兄弟出坐骑了,带你快速了解坐骑
- 全球热讯:预计重庆今年汛期高温干旱偏重|重庆加速构建新型分级诊疗体系
- 沪指收跌0.7%失守3300点 传媒、游戏板块逆势爆发
- 怎样改善皮肤(如何才能改善皮肤)
- 全球速讯:衢州房子装修纠纷律师收费最新标准
- 金域医学:三级医院客户收入占比提升,整体业务向高端医检发展_天天快看
- 全新马自达CX-50行也订单突破1.5万辆,长安马自达总裁:超出预期
- 4月的谷歌PixelWatch软件更新已发布包含安全更新 天天信息
-
吉林省敦化市市场监管局开展民生计量专项监督检查
为进一步规范市场经营者计量行为,切实维护广大消费者合法权益,确保“五一”期间市场平稳。近期,吉林...
-
好书推荐及理由200字城南旧事_好书推荐及理由200字
1、命运存在吗,当然存在,而且可以通过我们的努力去改变。2、《了凡四训》,种德立命、修身治世类书籍。3
-
当前快报:吉利银河L7正式下线 将在二季度内上市
2023年4月24日,吉利银河系列的首款量产车型——银河L7正式下线,即将在今年第二季度正式上市。新车已经...
-
马斯克遭遇多重打击 身家蒸发990亿
据大公报报道,据彭博社、《福布斯》杂志报道:世界首富马斯克20日迎来多重打击。先是特斯拉(Tesla)汽车
-
英雄群体_关于英雄群体的简介
1、英雄群体是由黄海数字出版社出版,这部小说作者是尹浩洋本文关于英雄群体的简介就讲解完毕,希望对大家
-
教育板块午后异动拉升 中公教育涨停
4月24日消息,午后教育板块异动拉升,中公教育涨停,科德教育、全通教育、博瑞传播涨超4%,昂立教育、国新
-
五一期间在京游览等级景区需预约
4月24日下午,北京市人民政府新闻办公室举行“五一”假期文化和旅游系列活动新闻发布会。北京市文旅局相...
-
观焦点:洪山区知识产权宣传周正式启动
洪山区知识产权宣传周正式启动---4月20日,由武汉市洪山区市场监管局牵头的“洪山区知识产权宣传周”活...
-
世界微资讯!亚通股份(600692)4月24日主力资金净卖出137.34万元
截至2023年4月24日收盘,亚通股份(600692)报收于5 63元,下跌1 75%,换手率1 16%,成交量2 96万手,成交额1665 6万元。
-
深陷“造假迷局”,销量大幅下滑,零跑汽车能逆风翻盘吗?
文|宁成缺来源|博望财经“如果零跑2023年销量上不去,那后面也就没什么希望了。”零跑汽车创始人朱江明...
-
手机进水屏幕有水印怎么办多少钱_手机进水屏幕有水印怎么办-天天新动态
1、若使用的是vivo手机,可参考手机进液处理方法:不要强行开机,强行开机,很有可能导致手机短路;2、不要
-
天天亮点!Sensor Tower:3月全球手游下载量45亿次 《Subway Surfers 地铁跑酷》位列榜首
SensorTower商店情报数据显示,Miniclip旗下SYBOGames《SubwaySurfers地铁跑酷》以近2000万次下载,位列3月
-
世界微速讯:771+21!最新12大学科门类792个大学本科专业盘点~
距离高考越来越近,大家选好目标院校和专业了吗?近日,教育部公布了2022《普通高等学校本科专业目录》。一
-
环球看点!人社部:一季度三项社会保险基金总收入2.04万亿元
人社部:一季度三项社会保险基金总收入2 04万亿元:今天(24日),人力资源和社会保障部发布的最新数据显示
-
环球视讯!公司问答丨日联科技:公司会进一步提升自产射线源的使用占比
格隆汇4月24日丨有投资者在互动平台向日联科技公司提问奕瑞科技境外主营业务收入已经占比40%,公司在国内和
-
山东港口:一季度货物吞吐量、集装箱吞吐量跑出“加速度”_每日看点
4月22日,科技日报记者从山东港口集团获悉,一季度山东港口货物吞吐量同比增长6 5%,集装箱吞吐量同比增长1
-
当前观点:天水围的夜与雾完整下载_天水围的夜与雾无删减版迅雷下载
1、提取码:9127神作,挺好看的,整部看完最喜欢男主。2、太有爱了,人设棒棒的,给出高分真是名副其实。3
-
人社部:全国已有人力资源服务机构6.3万家 年营收2.5万亿元
中国网财经4月24日讯人力资源社会保障部于2023年4月24日上午10:00举行2023年一季度新闻发布会,介绍2023年
-
上海首届职业技能大赛紧跟新赛道新技能发展趋势 让更多技能人才造就美好未来 环球新消息
记者周程祎“尊重专家,尊重选手,认真参赛,努力拼搏,赛出风格,赛出水平,充分展示新时代技能人员的...
-
世界热点评!刘亦菲个人资料(顺子个人资料)
1、各类棋牌游戏玩法不同,顺子比大小也不同。2、同花:为与王牌一样的其他同色牌。3、三条:又称“假葫...
-
每日一冷 NO.3677_世界简讯
冷兔槽,想起五小时后和人有约,可恶今天什么都做不成了。物以稀为贵,以后在人才市场,文盲是最抢手的! 完
-
廊坊的高考分数线 2019年廊坊市高考分数线-即时看
今天,大学路小编为大家带来了廊坊的高考分数线2019年廊坊市高考分数线,希望能帮助到广大考生和家长,一起
-
胡冰卿翟子路主演《风月锦囊》杀青 打造最具烟火气的古装探案剧
近日,由唐人影视出品,蔡艺侬担任总制片人,顾其铭执导,胡冰卿、翟子路、贺鹏、丁笑滢领衔主演,冯筱童、
-
3个特点!福州这个房价“2字头”的板块,怎么样?_世界最新
福州有一些地方,明明里市中心很近,但是房价却总是爬不起来,这究竟是什么原因呢?今天咱们一起分析一下洪
-
【环球速看料】科技中小型企业税收优惠政策(小型企业税收优惠政策)
1、小微企业税收优惠政策有哪些(一)流转税《财政部国家税务总局关于暂免征收部分小微企业增值税和营业税
-
小将雷佩凡展现大心脏6-5逆转本梅尔滕斯晋级第二轮_当前热点
北京时间4月8日消息,2021斯诺克世锦赛资格赛结束第一轮的较量。第三个比赛日,17岁小将雷佩凡展现大心脏,
-
2023年4月23日山东省邻甲苯胺价格最新行情预测_当前热讯
中国报告大厅2023年4月23日山东省邻甲苯胺价格最新走势监测显示:青岛和丰化工有限公司报价机构,今日邻甲
-
全球快消息!嘉兴金庸图书馆要拆除了?当地表态:绝对不会简单地“一拆了之”
知名自媒体发文呼吁引发全网关注4月22日晚,“六神磊磊读金庸”公众号发文,《恳请相关方面不要拆除金庸...
-
中国起名实用大全_有什么起名的方法
中国起名实用大全,有什么起名的方法很多人还不知道,现在让我们一起来看看吧!解答:1、用数学方法命名,
-
当前热议!工业元宇宙助制造业“智改数转”
本文转自:新华日报南京经开区这场大会聚焦AR技术落地工业元宇宙助制造业“智改数转”□本报记者李凯通...
-
钢银电商:全国钢市库存环比减少2.77%
钢银电商:本周钢市总库存量为1058 61万吨,较上周环比减少30 14万吨(-2 77%),包含39个城市,共计146个
-
火腿肠的制作过程恶心视频是真的吗_火腿肠的制作过程|环球聚看点
你们好,最近小活发现有诸多的小伙伴们对于火腿肠的制作过程恶心视频是真的吗,火腿肠的制作过程这个问题都
-
天天最资讯丨深圳市投资控股有限公司的控股企业性质_深圳市投资控股有限公司的控股企业
1、国信证券股份有限公司2、深圳市深超科技投资有限公司3、深圳市城市建设开发(集团)公司4、深圳经济特区
-
三魂七魄分别掌管什么-司命星君掌管什么_每日快讯
1、南斗六星分别为天府星、天梁星、天机星、天同星、天相星、七杀星;第一天府宫:司命星君第二天相宫:司
-
环球速讯:嘉曼服饰2022年度分配预案:拟10派3.6元
4月23日嘉曼服饰发布2022年度分配预案,拟10派3 6元(含税),预计派现金额合计为3888 00万元。派现额占净利
-
简易注销公告在哪里打印(简易注销公告)
1、企业在申请简易注销登记前,应主动在“国家企业信用信息公示系统(广东)”《简易注销公告》专栏向社...
-
沉沦?长城汽车一季度利润暴跌 116%!!
4月22日晚,长城汽车披露2023年一季度业绩报告,营收利润均出现负增长。报告显示,今年一季度营收290 39亿
-
公司受伤员工怎么赔偿 时快讯
一、公司受伤员工怎么赔偿公司员工受伤赔偿的方式:向用人单位说明情况,并向当地的社会保险行政部门申请工
-
全球快资讯丨小虫子的美故事
小虫子的美故事——《喓喓草虫》读后感允景洪小学289班赵禹茜指导老师:杨争艳暑假期间,我轻轻地捧起了...
-
中医育儿:宝宝脚趾甲沟炎红肿,家庭生活调理加以防治 天天观点
中医育儿:宝宝脚趾甲沟炎红肿,家庭生活调理加以防治中医育儿群的家长朋友:您好。群里有家长问,宝宝刚满
-
庐江搬迁安置迎来新模式!-全球新要闻
庐江搬迁安置迎来新模式!,房票,征收,安置房,庐江县,搬迁安置
-
你知道石家庄牛逼之夜么?
Rapper有时也会沉默不语,甚至有点腼腆有时也会嘻嘻哈哈,甚至和台上判若两人但音乐一旦响起手中的麦克风如
-
世界快报:一起读书吧!解锁石景山的多元阅读空间(一)
一起读书吧!解锁石景山的多元阅读空间(一)
-
2023襄阳高新区瞪羚企业发布会暨企业创新积分平台上线启动会举办
4月21日上午,2023襄阳高新区瞪羚企业发布会暨企业创新积分平台上线启动会举行。
-
天天热点评!如何利用Transformer技术实现图像风格迁移
更多精彩知识和图片持续分享,欢迎点赞关注和收藏。图像风格迁移是指将一幅图像的风格应用到另一幅图像上,
-
焦点要闻:2023年4月23日上海市一乙醇胺价格最新行情预测
中国报告大厅2023年4月23日上海市一乙醇胺价格最新走势监测显示:上海泉昕进出口贸易有限公司报价机构,今
-
三亚一的哥嫌路程过短抱怨游客事件简单介绍
1、4月23日,乘客黄先生称,三亚一出租车司机因嫌路程过短。2、一路黑脸抱怨,让其去乘坐滴滴车,最后自己
-
小米印度业务遇阻:市场份额跌至第四,48亿元资产遭扣押仍待解决-环球实时
去年四季度,小米出货量暴跌40%,丢掉了保持多年的第一位置,这也是小米自2018年从三星手中夺走榜首位置后
-
济南论道!“数字+社会治理”怎样干?8位专家拿出“干货”
数字时代已经到来,“数字社会”应运而生。在此背景下,如何以数字科学思维指导治理行为,实现政府与公...
-
女子称电视机凌晨突然飙女高音,客服给出了回应
女子表示电视机在凌晨的时候突然飙出了女高音,针对于这种问题客服也给出了回应。现在是属于科技时代,电视
X 关闭
X 关闭