Question

任何人都可以帮我尝试组合嵌套的span标签吗？

我有一些生成的HTML，我试图整理，我很难让这一点工作。示例HTML：

<p>
  <strong>
    <span style="font-family:arial,sans-serif">
      <span style="color:black">
        <span style="font-size:medium">HELLO</span>
      </span>
    </span>
  </strong>
</p>

我想要做的是将span标签组合成一个具有组合样式的标签，因此输出为：

<p>
  <strong>
    <span style="font-family:arial,sans-serif;color:black;font-size:medium">HELLO</span>
  </strong>
</p>

我在asp.net 4.0中使用C＃

谢谢，麦克

Answer 1

我提出了这个解决方案，它不是一种单线解决方案，但是它是：假设你在一个名为foo的变量中有HTML文本，那么你可以执行以下操作：

string replacement1 = "\"";
string replacement2 = "</span>";
string pattern = @"(?<=<span style=\")[^\"]+"; //Will match all the style strings
string pattern1 = @"(?<=<span style=)(.|\s)+\"(?=>[^<>].+</span>)"; //Will match from the first " to the last " before HELLO
string pattern2 = @"(</span>\s*)+"; //Will match any number of </span> tags
Regex rgx = new Regex(pattern);
MatchCollection matches = rgx.Matches(foo);
foreach (Match match in matches)
    replacement1 += match.Value + ";"; //Builds the new styles string
replacement1 += "\"";
Regex rgx = new Regex(pattern1);
string result = rgx.Replace(foo, replacement1); //Replace the multiple span style tags with a single one
Regex rgx = new Regex(pattern2); 
string result = rgx.Replace(foo, replacement2); //Replace the multiple closing span tags with a single one

第一次更换后你应该

<p>
  <strong>
    <span style="font-family:arial,sans-serif;color:black;font-size:medium">HELLO</span>
      </span>
    </span>
  </strong>
</p>

并在第二次替换之后：

<p>
  <strong>
    <span style="font-family:arial,sans-serif;color:black;font-size:medium">HELLO</span>
  </strong>
</p>

我无法测试它（它可能有一些拼写错误），但它应该可以工作！

Answer 2

您可以使用jQuery来获得预期的结果：

var css = "";
$("span").each(function (i) {
  css += $(this).attr('style')+';';
});
$("span").children().unwrap('<span>');
$("span").attr('style', css);

Answer 3

这是我使用名为Html Agility Pack（http://htmlagilitypack.codeplex.com/）的HTML Parser 1.4.6版编写的解决方案。将此库添加到项目中以使用以下代码。

var doc = new HtmlDocument();
doc.LoadHtml(INPUT);
foreach(var currentSpanNode in doc.DocumentNode.SelectNodes("//span")) {
    var parentNode = currentSpanNode.ParentNode;
    if (parentNode.Name != "span") continue;
    MergeStyleValuesLeft(parentNode.Attributes["style"], currentSpanNode.Attributes["style"]);
    parentNode.RemoveChild(currentSpanNode);
    parentNode.AppendChildren(currentSpanNode.ChildNodes);
}

var sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
doc.Save(sw);

此时，您的新HTML代码位于StringBuilder对象中。上面的代码使用了一个名为MergeStyleValuesLeft（）的函数。我在这里有一个简单的这个功能版本。根据您的要求，您可以改进它以处理重复样式。

private void MergeStyleValuesLeft(HtmlAttribute leftAttribute, HtmlAttribute rightAttribute) {
    if (leftAttribute == null || rightAttribute == null) return;
    char[] styleSeparators = "; ".ToCharArray();
    string leftValue = leftAttribute.Value.Trim(styleSeparators);
    string rightValue = rightAttribute.Value.Trim(styleSeparators);
    leftAttribute.Value = String.Format("{0};{1}", leftValue, rightValue);
}

Answer 4

抱歉，自从我提出这个问题之后就离开了，与此同时，一位同事看了一眼并提出了解决方案。

正如我上面对Brad所评论的那样，我发布的HTML是一个非常简洁的示例，这里是我们使用的测试代码的链接http://paste2.org/48hX9tpF

这是我的同事这样做的：首先找到嵌套打开

String outputHTML;
Regex re = new Regex("<span style=\"(.*?)\">(<span style=\"(.*?)\">)+", RegexOptions.IgnoreCase);
outputHTML = re.Replace(inputHTML, new MatchEvaluator(StyleMerger));

static string StyleMerger(Match regexMatch)
{
    String matchedText = regexMatch.ToString();
    return matchedText.Replace("\"><span style=\"", ";");
}

然后找到＆amp;替换嵌套的关闭标记

re = new Regex("</span>(</span>)+", RegexOptions.IgnoreCase);
outputHTML = re.Replace(outputHTML, "</span>");

这会生成此HTML http://paste2.org/xWFOKH3F

Answer 5

<strong>应放在<span>标记之后。还有一个名为font-weight的样式属性，您可以将其设置为粗体。

<p>
    <span style="font-family:arial,sans-serif;color:black;font-size:medium;font-weight:bold">HELLO</span>
</p>

组合嵌套的span标签

5 个答案: