原因

最近遇到一個以前一直忽略的問題，在項目中如果一些富文本里需要上傳圖片，這些圖片是保存在本地的，那存儲圖片路徑時就涉及到要保存完整路徑還是相對路徑。

分析

• 在前后端不分離的項目中，圖片和富文本編輯器所在的頁面是同域的，使用相對路徑也可以在富文本編輯器里展示圖片，故而數(shù)據(jù)庫中保存相對路徑即可。
• 但是在前后端分離的項目中就不可以，圖片無法加載，這時候需要使用完整路徑才能展示圖片。
  這時候如果直接在數(shù)據(jù)庫中保存完整路徑的話，一旦需要更換域名，到時候再更新數(shù)據(jù)庫中保存的域名，那將是噩夢！

思路

要解決上述問題，需要做一些操作，比如在保存富文本內(nèi)容時，把圖片地址的域名給移除，需要讀取富文本內(nèi)容時，再把圖片地址的域名加上，予以完善。

代碼

• 保存時移除Html中src的域名，支持英文域名和IP地址，支持?jǐn)y帶或不攜帶端口

/// <summary>
/// 移除HTML中SRC標(biāo)簽內(nèi)容里的域名 
/// 包含英文域名或IP地址，支持?jǐn)y帶或不攜帶端口
/// </summary>
/// <param name="html">HTML代碼</param>
/// <returns></returns>
public static string RemoveHtmlSrcDomainName(string html)
{
    if (string.IsNullOrEmpty(html))
    {
        return "";
    }

    /*
     * 正則解釋
     * 第一部分：(<\s*[^>]*?src\s*=\s*[""']?)，匹配src及之前的內(nèi)容
     * 第二部分：((?:http|https)?://[a-zA-z0-9]+(?:\.[a-zA-z0-9]+)*:{0,1}\d{0,5})，匹配以http協(xié)議或https協(xié)議開頭的，英文域名或IP地址，可攜帶最長5為數(shù)字的端口號
     * 第三部分：([^>]*?>)，匹配src之后的內(nèi)容
     * 
     * 替換解釋：
     * 正則表達(dá)式一共匹配出了三部分，用$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標(biāo)簽內(nèi)容里的域名
/// </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);
}

小結(jié)

經(jīng)測試，移除和完善都可正常使用。但是這里只對具有src屬性的html標(biāo)簽起作用，如果需要在其他屬性中（比如href）也使用類似的功能，可自行進(jìn)行優(yōu)化。