在 HTML 元素的文本中搜索

Question

我想在 C# (winforms) 中使用 webBrowser 控件 API 或使用注入的 java 脚本在特定网页元素中搜索单词。

我使用了以下 java 脚本并将其注入到加载的网页中：

var TRange=null;

function findString (str) {

 var strFound;

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
  else if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange();
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }

 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}

此代码适用于整个页面，但我想在特定元素的内部文本中进行搜索。我怎样才能将我的搜索限制在这样的元素上？

Answer 1

我假设您知道如何获取元素的 DOM 引用。之后，您可以使用 JQuery 过滤元素中的文本节点，例如：

  $($element.contents()).filter(function(){
    return this.nodeType === 3; // filter textnodes only

  }).each(function(){

    findString(this.textContent);
  });

Answer 2

您需要：

添加对 Microsoft.mshtml.dll
然后使用 webBrowser1.Document.Body.DomElement

IHTMLBodyElement

然后找到你的标签并从你的标签中得到IHTMLElement。
然后得到IHtmlTextRange from body using createTextRange
然后使用 moveToElementText
然后使用 findText
然后如果找到字符串，你可以select它。

例子

这是一个工作示例，我们在 "div2" 中找到 "some" 文本，而我们有 2 个 div 元素，div1 和 div2 以及两者它们包含 "some" 文本。

表格

创建一个 Form 并在 Form1 上放置一个 WebBrowser 控件并编写此代码：

public Form1()
{
    InitializeComponent();
    this.Load += Form1_Load;
    this.webBrowser1.DocumentCompleted += webBrowser1_DocumentCompleted;
}

private void Form1_Load(object sender, EventArgs e)
{
    this.webBrowser1.Navigate(@"D:\file.html");
}

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    var searchText="some";
    var body = webBrowser1.Document.Body.DomElement as IHTMLBodyElement;
    var tag= webBrowser1.Document.GetElementById("div2").DomElement as IHTMLElement;

    var range = body.createTextRange();
    range.moveToElementText(tag);
    if (range.findText(searchText, searchText.Length, 0))
        range.select();
    else
        MessageBox.Show(string.Format("String '{0}' not found.", searchText));
}

样本Html内容

这里是file.html的测试内容：

<html>
<head><title>Select content</title></head>
<body>
    <div id="div1">Here is some content</div>
    <div id="div2">Here is some other content</div>
</body>
</html>

截图

这是屏幕截图：

备注

您可能需要在代码中添加一些空值检查。
您可以使用其他属性查找元素，例如使用名称属性：
对于javascript的解决方案，你可以看看

var tag = this.webBrowser1.Document.Body.All.GetElementsByName("somename")
              .Cast<HtmlElement>()
              .FirstOrDefault().DomElement as IHTMLElement;

Answer 3

以下 java 脚本在第一次调用时使用 moveToElementText（当 TRange 为空时）有效

var TRange=null;

function findString (str) {

 var strFound;

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
  else if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange();
   var elem = document.getElementById('my_elem');
   // go to the element text
   TRange.moveToElementText(elem);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }

 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}

在 HTML 元素的文本中搜索

Search within the text of an HTML Element

.net

javascript

c#

webbrowser-control

winforms

例子