将查询字符串附加到字符串中的 img 标签

Question

我有一个这样的字符串：

<p>1</p><p><img src="https://somesite/1.png?x=1&y=2"></p>
<p>2</p><p><img src="https://somesite/2.png?x=1&y=2"></p>
<p>3</p><p><img src="https://somesite/3.png?x=1&y=2"></p>

这是Kendo UI's editor的结果。

我希望所有图像 src 都附加一个类似于 &tick=2342342343 的刻度（因为我正在尝试克服像 this one from another stackoverflow 这样的缓存问题）

所以输出看起来像这样：

<p>1</p><p><img src="https://somesite/1.png?x=1&y=2&tick=2342342343"></p> 
<p>2</p><p><img src="https://somesite/2.png?x=1&y=2&tick=2342342343"></p>
<p>3</p><p><img src="https://somesite/3.png?x=1&y=2&tick=2342342343"></p>

我认为 reg 表达式可能是一个好的开始：

var img = "img";
var imgRegExp = "<img src=\"[^\"]*\">";
Regex re = new Regex(imgRegExp);    
if (editorText!=null && editorText.Contains(img))
{
    //replace each editorText
}

Answer 1

我加入 cmets 说如果 HTML 输出发生变化，HTML 可能会发生变化，并且正则表达式可能突然不再起作用。但有时正则表达式比加载完整的解析器要高效得多。所以这取决于变化的风险，如果是这种情况，你能控制这些变化吗？ （剑道UI等更新）

对于正则表达式解决方案，为什么不试试这个：https://regex101.com/r/nJ3CL8/1

您可以直接从 regex101 保存的示例生成代码。

我对快速解决方案的想法：

• 我记住，有些空间可能无处不在。是的，甚至在= 标志附近！
• 使用不区分大小写的标志，因为它可以是<IMG Src="..." />
• 它们可以是img 和src 之间的任何其他属性类型，因此也可以捕获它。
• 一个属性可以用单引号或双引号括起来，甚至什么都没有！我没有考虑这种情况，因为通常情况并非如此，通常是 src 属性。

模式和替换字符串在 C# 中是这样的：

string pattern = @"<\s*img\s*([^>]*?)src\s*=\s*([""'])(.*?)\2";

string substitution = @"<img \1src=\2\3&tick=123456789\2";

解释：

• \s* 表示任意空格，0 次或多次。
• [^>]*? 表示除> 0 次或多次以外的任何字符，但不贪心（搜索不远）。
• ([^>]*?) 就是在 src 属性之前捕获这些属性。它以替换模式捕获 n°1 => \1。
• (["']) 是捕获单引号或双引号。它是第 2 次捕获 => 稍后重新使用。
• (.*?) 以不贪婪的方式捕获 src 值。它之所以有效，是因为我使用了单/双引号的 \2 反向引用。

Answer 2

最后我选择了正则表达式。正如@Wiktor-Stribiżew 指出的那样，HTML 解析没有成功 - 我正在使用编辑器来生成几个标签。

private static void AppendQueryStringToIMG()
    {
        string output = "<p>1</p><p><img src=\"https://a_dynamic_environment.file.core.windows.net/some-proj/my-images/img__1.png?x=123&y=234\"></p><p>2</p><p><img src=\"https://a_dynamic_environment.file.core.windows.net/some-proj/my-images/img__2.png?x=123&y=234\"></p><p>3</p><p><img src=\"https://a_dynamic_environment.file.core.windows.net/some-proj/my-images/img__3.png?x=123&y=234\"></p>";
        
        if (output != null && output.Contains("img"))
        {
            var m = Regex.Match(output, "<img .*?src=\\\"(.*?)\\\"");

            while (m.Success)
            {
                var href = m.Groups[1].Value;
                output = output.Replace(href, href + "&ticks=" + DateTimeOffset.UtcNow.Ticks);

                m = m.NextMatch();
            }
        }

        //output:
        //string with &tick=1231231231 at the end of each img
    }