1

ネストされたスパンタグを組み合わせようとするのを手伝ってくれる人はいますか?

整理しようとしている生成された 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 タグを結合されたスタイルの 1 つに結合することです。そのため、出力は次のようになります。

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

asp.net 4.0でC#を使用しています

ありがとう、マイク

4

5 に答える 5

1

私はこのソリューションを思いつきました。これはワンライナーの種類のソリューションではありませんが、ここにあります: という変数に 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>

そして2回目の置換の後：

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

私はそれをテストできませんでした (また、タイプミスがあるかもしれません) が、動作するはずです!

于 2013-06-10T13:42:24.350 に答える
0

これは、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);
}
于 2013-06-11T12:19:36.010 に答える
0

jQuery を使用して、期待される結果を得ることができます。

var css = "";
$("span").each(function (i) {
  css += $(this).attr('style')+';';
});
$("span").children().unwrap('<span>');
$("span").attr('style', css);
于 2013-06-11T08:03:10.773 に答える
0

申し訳ありませんが、私が質問してから離れていましたが、その間に同僚が調べて解決策を考え出しました.

上で 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

于 2013-06-21T13:20:39.217 に答える
-2

<strong><span>タグの後に置く必要があります。また、太字に設定できる font-weight というスタイル プロパティもあります。

<p>
    <span style="font-family:arial,sans-serif;color:black;font-size:medium;font-weight:bold">HELLO</span>
</p>
于 2013-06-10T13:03:00.117 に答える