Delphi 獲取 WebBrowser 選取區域 HTML 代碼：IHTMLDocument2/selection/createRange 實戰

前言

在嵌入 TWebBrowser 的應用中，常需獲取用戶鼠標選中的網頁片段 HTML。核心在於 IHTMLDocument2.selection.createRange() 返回 IHTMLTxtRange，其 htmlText 屬性即為所需 HTML 片段。

關鍵介面與方法

完整實現代碼

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, OleCtrls, SHDocVw, StdCtrls, mshtml;

type
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    Button1: TButton;
    Memo1: TMemo;
    procedure FormCreate(Sender: TObject);
    procedure Button1Click(Sender: TObject);
  end;

var Form1: TForm1;

implementation
{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
begin
  WebBrowser1.Navigate('www.csdn.net');
end;

procedure TForm1.Button1Click(Sender: TObject);
var
  doc: IHTMLDocument2;
  selRange: IHTMLTxtRange;
begin
  {獲取文檔介面}
  doc := WebBrowser1.Document as IHTMLDocument2;
  {創建選取範圍}
  selRange := doc.selection.createRange() as IHTMLTxtRange;
  {輸出 HTML 片段}
  Memo1.Text := selRange.htmlText;
end;

end.

運行效果

用戶在 WebBrowser 中用鼠標選中任意網頁內容，點擊按鈕，Memo 顯示該選區對應的 HTML 源碼（包含標籤、屬性、內文）。

擴展應用

• 純文本獲取：使用 selRange.text 獲取不帶標籤的純文本。
• 插入/替換 HTML：selRange.pasteHTML('<b>新內容</b>') 可在選區插入 HTML。
• 獲取選區父元素：selRange.parentElement() 返回包含選區的最近父節點，便於結構化操作。
• 跨框架選取：若頁面含 <iframe>，需先獲取框架的 IWebBrowser2 再查其 Document。

常見問題

Q: WebBrowser1.Document 返回 nil

A: 頁面尚未加載完成，需在 DocumentComplete 事件後操作，或檢查 ReadyState = READYSTATE_COMPLETE。

Q: 選區為空或跨多個元素

A: htmlText 會自動補全標籤以保證片段合法；若選區跨塊級元素，輸出可能包含多個頂層標籤。

Q: 64 位 Delphi 編譯報錯

A: 需確保引用的 mshtml.pas 為 64 位兼容版（RAD Studio 10.3+ 內建已支援）。

總結

三行核心代碼（Document as IHTMLDocument2 → selection.createRange → htmlText）即可實現 WebBrowser 選區 HTML 獲取，是開發網頁編輯器、內容抓取工具、標註插件的基礎技能。