组合嵌套的span标签

本文关键字：标签 span 嵌套 组合 | 更新日期: 2023-09-27 18:17:37

有人能帮助我尝试组合嵌套的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#

谢谢,迈克

组合嵌套的span标签

我想出了这个解决方案，这不是一个单行的解决方案，但这里是:让我们说你有HTML文本在一个名为foo的变量中，然后你可以做以下事情:

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>

我无法测试它(它可能有一些拼写错误)，但它应该工作!

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

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

这是我使用名为HTML Agility Pack (http://htmlagilitypack.codeplex.com/)的HTML解析器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);
}

抱歉，我问完这个问题就走了，在此期间，一位同事看了一下，想出了一个解决方案。

正如我上面对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='"", ";");
}

然后找到&替换嵌套的关闭标签

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

结果是这个HTML http://paste2.org/xWFOKH3F

<strong>应放在<span>标签之后。还有一个样式属性叫做font-weight，可以设置为粗体。

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