anglesharp - AngleSharp のテキスト ノードに HTML を挿入するにはどうすればよいですか?

Question

AngleSharp でドキュメントを解析しています。テキスト ノード (NodeName: "#text") があり、そこに HTML を挿入したいと考えています。確かに NodeValue を好きな値にリセットできますが、それでもテキスト ノードであるため、すべての角かっこはエスケープされます。

テキスト ノードの文字列値を取得し、そこに HTML を挿入し、その HTML が元のテキスト ノードに取って代わる解析済み DOM 表現を取得するにはどうすればよいですか?

Answer 1

あなたが望むのは、単一のテキストノードを複数のノードに置き換えることだと思います。

たとえば<div>foo</div>、

+ root
  + textnode

になる

+ root
  + textnode (1)
  + element
  + textnode (2)

でき<div>f<b>o</b>o</div>ました。私が考えることができる最も簡単な方法は、ノードを置き換えることです。

var source = @"<div>foo</div>";
var parser = new HtmlParser();
var document = parser.Parse(source);
var div = document.QuerySelector("div");
div.InnerHtml = div.InnerHtml.Replace("foo", "f<b>o</b>o");

ここで、テキストを置き換えるだけでは、あなたが望むものではないかもしれないと主張することができます. 挿入したい要素が既にあるかもしれません。したがって、テキスト ノードを分割し、残りのコンテンツを挿入するのがより良い (さらに複雑な) 方法です。

var source = @"<div>foo</div>";
var parser = new HtmlParser();
var document = parser.Parse(source);
var div = document.QuerySelector("div");
var text = div.TextContent;
div.RemoveChild(div.FirstChild); // assuming there is only one child
var bold = document.CreateElement("b");
bold.TextContent = text.Substring(1, 1); //o
div.Append(
    document.CreateTextNode(text.Substring(0, 1)), //f
    bold,
    document.CreateTextNode(text.Substring(2, 1)));//o

ユースケースによっては、もっと簡単な解決策があるかもしれません。