原因
最近遇到一个以前一直忽略的问题,在项目中如果一些富文本里需要上传图片,这些图片是保存在本地的,那存储图片路径时就涉及到要保存完整路径还是相对路径。
分析
- 在前后端不分离的项目中,图片和富文本编辑器所在的页面是同域的,使用相对路径也可以在富文本编辑器里展示图片,故而数据库中保存相对路径即可。
- 但是在前后端分离的项目中就不可以,图片无法加载,这时候需要使用完整路径才能展示图片。
这时候如果直接在数据库中保存完整路径的话,一旦需要更换域名,到时候再更新数据库中保存的域名,那将是噩梦!
思路
要解决上述问题,需要做一些操作,比如在保存富文本内容时,把图片地址的域名给移除,需要读取富文本内容时,再把图片地址的域名加上,予以完善。
代码
- 保存时移除Html中src的域名,支持英文域名和IP地址,支持携带或不携带端口
/// <summary>
/// 移除HTML中SRC标签内容里的域名
/// 包含英文域名或IP地址,支持携带或不携带端口
/// </summary>
/// <param name="html">HTML代码</param>
/// <returns></returns>
public static string RemoveHtmlSrcDomainName(string html)
{
if (string.IsNullOrEmpty(html))
{
return "";
}
/*
* 正则解释
* 第一部分:(<\s*[^>]*?src\s*=\s*[""']?),匹配src及之前的内容
* 第二部分:((?:http|https)?://[a-zA-z0-9]+(?:\.[a-zA-z0-9]+)*:{0,1}\d{0,5}),匹配以http协议或https协议开头的,英文域名或IP地址,可携带最长5为数字的端口号
* 第三部分:([^>]*?>),匹配src之后的内容
*
* 替换解释:
* 正则表达式一共匹配出了三部分,用$1表示第一部分,$2表示第二部分,$3表示第三部分
* 如果只是移除域名,则最终替换后的格式就是:"$1$3"
* 如果需要把域名替换为其他字符串,比如/resource/,则最终替换后的格式就是:"$1/resource/$3"
*
* RegexOptions.IgnoreCase:忽略大小写
*/
return Regex.Replace(html, @"(<\s*[^>]*?src\s*=\s*[""']?)((?:http|https)?://[a-zA-z0-9]+(?:\.[a-zA-z0-9]+)*:{0,1}\d{0,5})([^>]*?>)", "$1$3", RegexOptions.IgnoreCase);
}
这种方式可以最大限度的避免把不改移除的域名给移除掉,比如富文本里的文字中正好有要移除掉的域名,如果简单粗暴的使用Replace就会把所有符合条件的域名都移除,这里就可以避免。
- 读取时完善域名
/// <summary>
/// 补充完善HTML中SRC标签内容里的域名
/// </summary>
/// <param name="html">HTML代码</param>
/// <param name="domain">域名</param>
/// <returns></returns>
public static string ComplementHtmlSrcDomainName(string html, string domain)
{
if (string.IsNullOrEmpty(html) || string.IsNullOrEmpty(domain))
{
return "";
}
return Regex.Replace(html, @"(<\s*[^>]*?)src=([""'])(?!((http|https)?://))([^""']+)", $"$1src=$2{domain}$5", RegexOptions.IgnoreCase);
}
小结
经测试,移除和完善都可正常使用。但是这里只对具有src属性的html标签起作用,如果需要在其他属性中(比如href)也使用类似的功能,可自行进行优化。