一、说明

背景:最近在做同步京东商品信息时遇到一个问题,同步后的商品详情无法在富文本中修改,强制修改会导致图片无法正常显示,研究发现详情中的图片是在css的作为背景图指定的。

解决:经过多次尝试,最后使用自定义HTML标签模板,提取css样式中background-image:url的图片地址和尺寸,并替换到自定义的模板中

技术:Java语言、正则表达式

二、代码

public static void main(String[] args) {
StringBuilder stringBuilder = new StringBuilder();
//商品详情
String goodsDesc = "<div cssurl='//sku-market-gw.jd.com/css/pc/100002519219.css?t=1581586700014'></div><div id='zbViewModulesH' value='4797'></div><input id='zbViewModulesHeight' type='hidden' value='4797'/><div skudesign=\\\"100010\\\"></div><div class=\\\"ssd-module-wrap\\\" >\\n <div id=\\\"ssd-vc-goods\\\" class=\\\"ssd-module ssd-module-goods M15541052686741\\\" data-id=\\\"M15541052686741\\\">\\n <ul class=\\\"ssd-goods-4\\\">\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t26977/50/1495537803/456791/ca60d3de/5be4e374Nf8e94aa9.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 进口威化饼干 零食礼盒 零食大礼包 潘多拉礼盒684g\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 进口威化饼干 零食礼盒 零食大礼包 潘多拉礼盒684g\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t23938/203/1285847551/405421/27964aa9/5b57e55eN969c2d3f.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 饼干 咔芙尔焦糖威化饼干73.5g\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 饼干 咔芙尔焦糖威化饼干73.5g\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t28057/267/707899178/312718/1054f7be/5bfbda66Ne622ae83.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 乳酪夹心威化饼干160g\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 乳酪夹心威化饼干160g\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t24409/100/1278216587/342196/7f15ac48/5b580b36Nb9007958.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 巧克力夹心威化饼干125g\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 巧克力夹心威化饼干125g\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t1/26596/26/9557/317836/5c7f4fedE8e6d5730/940a4d2112e62fc3.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 巧克力咔咔脆组合装320g(160g*2盒)\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 巧克力咔咔脆组合装320g(160g*2盒)\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t1/16950/37/10436/362577/5c8741b5E238f9c4a/ad91f31e0b26302c.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 咔咔脆威化饼干 泡泡糖味80g/盒\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 咔咔脆威化饼干 泡泡糖味80g/盒\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t20488/87/2361646474/244765/b67e1c77/5b503ba8N075a3501.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 咔咔脆威化饼干 牛奶味160g\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 咔咔脆威化饼干 牛奶味160g\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n <li>\\n <a >\\n <div class=\\\"ssd-good-item\\\">\\n <div class=\\\"ssd-good-img\\\">\\n <img src=\\\"http://img30.360buyimg.com/n1/jfs/t1/12175/32/10619/337857/5c8741e3E45420cc9/b3dab30dd73a7d8a.jpg\\\" alt=\\\"印尼进口 Tango威化饼干 休闲零食 咔咔脆威化饼干 草莓味80g/盒\\\"/>\\n </div>\\n <div class=\\\"ssd-good-info\\\">\\n <p class=\\\"ssd-good-name\\\">\\n 印尼进口 Tango威化饼干 休闲零食 咔咔脆威化饼干 草莓味80g/盒\\n </p>\\n </div>\\n </div>\\n </a>\\n </li>\\n </ul>\\n</div><div class=\\\"ssd-module M15518471203811 animate-M15518471203811\\\" data-id=\\\"M15518471203811\\\">\\n \\n</div>\\n<div class=\\\"ssd-module M15518471298134 animate-M15518471298134\\\" data-id=\\\"M15518471298134\\\">\\n \\n</div>\\n<div class=\\\"ssd-module M15518471291853 animate-M15518471291853\\\" data-id=\\\"M15518471291853\\\">\\n \\n</div>\\n<div class=\\\"ssd-module M15518471283932 animate-M15518471283932\\\" data-id=\\\"M15518471283932\\\">\\n \\n</div>\\n\\n</div>\\n<!-- 2019-07-01 10:02:50 --> \\n<style>.ssd-module-wrap{position:relative;margin:0 auto;width:750px;text-align:left;background-color:#fff}.ssd-module-wrap .ssd-module,.ssd-module-wrap .ssd-module-heading{width:750px;position:relative;overflow:hidden}.ssd-module-wrap .ssd-module{background-repeat:no-repeat;background-position:left top;background-size:100% 100%}.ssd-module-wrap .ssd-module-heading{background-repeat:no-repeat;background-position:left center;background-size:100% 100%}.ssd-module-wrap .ssd-module-heading .ssd-module-heading-layout{display:inline-block}.ssd-module-wrap .ssd-module-heading .ssd-widget-heading-ch{float:left;display:inline-block;margin:0 6px 0 15px;height:100%}.ssd-module-wrap .ssd-module-heading .ssd-widget-heading-en{float:left;display:inline-block;margin:0 15px 0 6px;height:100%}.ssd-module-wrap .ssd-widget-pic,.ssd-module-wrap .ssd-widget-text,.ssd-module-wrap .ssd-widget-line,.ssd-module-wrap .ssd-widget-rectangle,.ssd-module-wrap .ssd-widget-circle,.ssd-module-wrap .ssd-widget-triangle,.ssd-module-wrap .ssd-widget-table{position:absolute;overflow:hidden}.ssd-module-wrap .ssd-widget-rectangle{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ssd-module-wrap .ssd-widget-table table{width:100%;height:100%}.ssd-module-wrap .ssd-widget-table td{position:relative;white-space:pre-line;word-break:break-all}.ssd-module-wrap .ssd-widget-pic img{display:block;width:100%;height:100%}.ssd-module-wrap .ssd-widget-text{line-height:1.5;word-break:break-all}.ssd-module-wrap .ssd-widget-text span{display:block;overflow:hidden;width:100%;height:100%;padding:0;margin:0;word-break:break-all;word-wrap:break-word;white-space:normal}.ssd-module-wrap .ssd-widget-link{position:absolute;left:0;top:0;width:100%;height:100%;background:transparent;z-index:100}.ssd-module-wrap .ssd-cell-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;overflow:auto}.ssd-module-wrap .M15541052686741{width:750px; height:492px}\\n.ssd-module-wrap .M15541052686741 ul {\\n padding: 5px;\\n line-height: 1.15;\\n background: #F3F4F7;\\n overflow: hidden;\\n}\\n\\n.ssd-module-wrap .M15541052686741 li {\\n list-style-type: none;\\n padding: 5px;\\n float: left;\\n -moz-box-sizing: border-box;\\n box-sizing: border-box;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-goods-1 li {\\n width: 100%;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-goods-2 li {\\n width: 50%;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-goods-3 li {\\n width: 33.33%;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-goods-4 li {\\n width: 25%;\\n}\\n\\n.ssd-module-wrap .M15541052686741 a {\\n display: block;\\n overflow: hidden;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-good-item {\\n background-color: #fff;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-good-img {\\n position: relative;\\n padding-top: 100%;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-good-img img {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-good-info {\\n padding: 10px;\\n margin: 0;\\n}\\n\\n.ssd-module-wrap .M15541052686741 .ssd-good-name {\\n margin: 0;\\n height: 36px;\\n line-height: 18px;\\n font-size: 14px;\\n color: #333333;\\n display: -webkit-box;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical; \\n}.ssd-module-wrap .M15518471203811{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(http://img30.360buyimg.com/sku/jfs/t1/31717/2/4671/349535/5c7f4f07E899abe1e/9dd81eaf2aac0863.jpg); height:1083px}\\n.ssd-module-wrap .M15518471298134{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(http://img30.360buyimg.com/sku/jfs/t1/14459/14/9500/215997/5c7f4f06E886e02de/9de0bdce8ff65b3c.jpg); height:786px}\\n.ssd-module-wrap .M15518471291853{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(http://img30.360buyimg.com/sku/jfs/t1/25970/3/9647/494996/5c7f4f07E79829fc4/41a47699929ca408.jpg); height:1416px}\\n.ssd-module-wrap .M15518471283932{width:750px; background-color:#e9e9e9; background-size:100% 100%; background-image:url(http://img30.360buyimg.com/sku/jfs/t1/79600/29/3390/325766/5d196888Ee80899ac/6b260d5e4eab426d.jpg); height:1020px}\\n</style>";
//商品详情模板
String goodsDescTemplate = "<p><img src=%s data-width=750 data-height=%s /></p>"; //定义提取图片URL和height值的正则表达式,提取的字段用group的()语法
Pattern pattern = Pattern.compile("background-image:url\\((https?://.*)\\).*height:(\\d+)"); //研究原串后,先以尺寸进行分组
String[] split = goodsDesc.split("px}");
for (String s : split) {
if (s.contains("background-image:url")){ //过去掉不含背景图片的数据
Matcher matcher = pattern.matcher(s); //指定匹配器
while (matcher.find()){ //进行查找,并判断是否匹配
System.out.println("匹配到的字符串:"+ matcher.group());
System.out.println("提取的图片地址:"+ matcher.group(1));
System.out.println("提取的height值:"+ matcher.group(2));
stringBuilder.append(String.format(goodsDescTemplate, matcher.group(1), matcher.group(2)));
}
}
} System.out.println("拼接的字符串:"+ stringBuilder);
}

三、打印日志

匹配到的字符串:background-image:url(http://img30.360buyimg.com/sku/jfs/t1/31717/2/4671/349535/5c7f4f07E899abe1e/9dd81eaf2aac0863.jpg); height:1083
提取的图片地址:http://img30.360buyimg.com/sku/jfs/t1/31717/2/4671/349535/5c7f4f07E899abe1e/9dd81eaf2aac0863.jpg
提取的height值:1083
匹配到的字符串:background-image:url(http://img30.360buyimg.com/sku/jfs/t1/14459/14/9500/215997/5c7f4f06E886e02de/9de0bdce8ff65b3c.jpg); height:786
提取的图片地址:http://img30.360buyimg.com/sku/jfs/t1/14459/14/9500/215997/5c7f4f06E886e02de/9de0bdce8ff65b3c.jpg
提取的height值:786
匹配到的字符串:background-image:url(http://img30.360buyimg.com/sku/jfs/t1/25970/3/9647/494996/5c7f4f07E79829fc4/41a47699929ca408.jpg); height:1416
提取的图片地址:http://img30.360buyimg.com/sku/jfs/t1/25970/3/9647/494996/5c7f4f07E79829fc4/41a47699929ca408.jpg
提取的height值:1416
匹配到的字符串:background-image:url(http://img30.360buyimg.com/sku/jfs/t1/79600/29/3390/325766/5d196888Ee80899ac/6b260d5e4eab426d.jpg); height:1020
提取的图片地址:http://img30.360buyimg.com/sku/jfs/t1/79600/29/3390/325766/5d196888Ee80899ac/6b260d5e4eab426d.jpg
提取的height值:1020
拼接的字符串:<p><img src=http://img30.360buyimg.com/sku/jfs/t1/31717/2/4671/349535/5c7f4f07E899abe1e/9dd81eaf2aac0863.jpg data-width=750 data-height=1083 /></p><p><img src=http://img30.360buyimg.com/sku/jfs/t1/14459/14/9500/215997/5c7f4f06E886e02de/9de0bdce8ff65b3c.jpg data-width=750 data-height=786 /></p><p><img src=http://img30.360buyimg.com/sku/jfs/t1/25970/3/9647/494996/5c7f4f07E79829fc4/41a47699929ca408.jpg data-width=750 data-height=1416 /></p><p><img src=http://img30.360buyimg.com/sku/jfs/t1/79600/29/3390/325766/5d196888Ee80899ac/6b260d5e4eab426d.jpg data-width=750 data-height=1020 /></p>

使用正则提取字符串中URL等信息的更多相关文章

  1. python3 re模块正则匹配字符串中的时间信息

    匹配时间: # -*- coding:utf-8 -*- import re def parseDate(l): patternForTime = r'(\d{4}[\D]\d{1,2}[\D]\d{ ...

  2. java 正则提取字符串中的电话号码

    public static void test2() { String str = "张三:13539558064,李四:15626829748,赵六:13718952204"; ...

  3. php通过正则从字符串中获取所有图片url地址

    /** * 提取字符串中图片url地址 * @param type $str * @return type */ function getimgs($str) { $reg = '/((http|ht ...

  4. 【面试题】JS使用parseInt()、正则截取字符串中数字

    JS使用parseInt()和正则截取字符串中数字 点击打开视频讲解更加详细 parseInt() 函数 定义和用法 parseInt() 函数可解析一个字符串,并返回一个整数. 当参数 radix ...

  5. C++ 提取字符串中的数字

    C++ 提取字符串中的数字 #include <iostream> using namespace std; int main() { ] = "1ab2cd3ef45g&quo ...

  6. 正则去除字符串中的html标签,但不去除<br>标签

    一.去除html标签 filterHTMLTag(msg) { var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag msg ...

  7. PHP用正则匹配字符串中的特殊字符防SQL注入

    本文出至:新太潮流网络博客 /** * [用正则匹配字符串中的特殊字符] * @E-mial wuliqiang_aa@163.com * @TIME 2017-04-07 * @WEB http:/ ...

  8. fortran中提取字符串中可见字符的索引

    fortran中常常需要提取字符串中可见字符的索引,下面是个小例子: !============================================================= su ...

  9. PHP提取字符串中的手机号正则表达式怎么写

    0. 简介 PHP通过正则表达式提取字符串中的手机号并判断运营商,简单快速方便,能提取多个手机号. 1. 代码 <?php header("content-type:text/plai ...

随机推荐

  1. 深度优先搜索DFS---01背包问题(1)

    题目: 有n件物品,每件物品的重量为w[i],价值为c[i].现在需要选出若干件物品放入一个容量为 V 的背包中,使得在选入背包的物品重量之和,不超过容量V的前提下,让北欧保重物品的价值之和最大,求最 ...

  2. ng-http

    启用 Http 服务 open the root AppModule, import the HttpClientModule symbol from @angular/common/http, ad ...

  3. Codeforces Round #592 (Div. 2) D - Paint the Tree

    题目链接:https://codeforces.com/contest/1244/problem/D 题意:给你一个树,让你把树上的每个节点染成三种颜色,使得任意三个互相相邻的节点颜色都不一样(意思是 ...

  4. Project Euler 133: Repunit nonfactors

    题意 英文 做法 结论1:\(R(a)|R(am)(a,m\ge 1)\) \[\frac{R(am)}{R(a)}=\frac{\frac{10^{am}-1}{9}}{R(a)}=\frac{\f ...

  5. 错误 CS8107 C# 7.0 中不支持功能“xxxxxx”。请使用 7.1 或更高的语言版本。

    解决方法:项目右键属性 —> 生成 —> 找到最下面的高级按钮,点击高级按钮 —> 常规 —> 语言版本 —> 选择 C#最新次要版本,或者比当前版本更高的版本即可,点击 ...

  6. 【H5适配 笔记1】rem适配

    设备像素比(dpr)= 物理像素(手机渲染像素.分辨率)/设备独立像素(手机所显示元素的大小) 视口(viewport) 布局视口(获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条.边框和外边距 ...

  7. python 集合运算交集&并集&差集

    差集>>> #两个列表的差集3 >>> ret3 = list(set(a) ^ set(b)) #两个列表的差集 >>> ret4=list(s ...

  8. MySQL 8 通用二进制发行版安装

    安装前的一些说明: 检查平台兼容性: https://www.mysql.com/support/supportedplatforms/database.html 如果是在RedHat7版本安装的话, ...

  9. 一直报找不到function,然后又不为null。最后发现是个数组。哭死。

    今天写代码,报找不到function.然后又不为空.最后发现是类型不对.因为是数组,所以不能用node.function(),而应该用nodeArr[0].function.错用前者会找不到funct ...

  10. XSS漏洞的poc与exp

    poc <script>alert('xss')</script>  最简单常用的poc <a href='' onclick=alert('xss')>type& ...