在体html中搜索文本的最佳方法是什么?

时间:2022-09-13 07:56:28

As of now I am using the the javascript search method to replace some text in body HTML like below..

到目前为止,我正在使用javascript搜索方法来替换body HTML中的一些文本,如下所示。

Suppose my html is

假设我的html

 <body>
      <div> I am in body...</div>
 </body>

Then I am using the below approach

然后我使用下面的方法

 var body = $(body);
 var text = body.html();
 text = text.replace('I am in body...','Yes');
 body.html(text);

But I could see slow page search in browsers like IE..
Please suggest me to improve this and also please let know if there are any plugins to search and match a string even if it contains any html tags in it.. Like below

但是我可以在IE这样的浏览器中看到缓慢的页面搜索。请建议我改进这一点,并请告知是否有任何插件可以搜索和匹配一个字符串,即使它包含任何html标签。像下面的

 <body>
       <div><span>I </span> am in body...</div>
 </body>

With the current method I cannot match this..
If i use

用目前的方法我无法进行比较。如果我使用

  $('*:contains("some search text string")'); 

This will match the DIV and BODY as well.. But here I want to search the html text not parent element... Thanks

这将与DIV和BODY一致。但是这里我想搜索html文本而不是父元素…谢谢

4 个解决方案

#1


4  

You should take a look at :

你应该看看:

ranges:(to modify text without overwriting the complete body)

范围:(修改文本而不覆盖整个正文)

IE: http://msdn.microsoft.com/en-us/library/ms535872%28v=vs.85%29.aspx
Others: https://developer.mozilla.org/en/DOM/range

例如:http://msdn.microsoft.com/en-us/library/ms535872%28v=vs.85%29.aspx:https://developer.mozilla.org/en/DOM/range


find()/findText()(to create the ranges)

find()/ findText()(创建范围)

IE: http://msdn.microsoft.com/en-us/library/ms536422%28v=vs.85%29.aspx
Others: https://developer.mozilla.org/en/DOM/window.find

例如:http://msdn.microsoft.com/en-us/library/ms536422%28v=vs.85%29.aspx:https://developer.mozilla.org/en/DOM/window.find

(Opera doesn't support find or findText)

(Opera不支持查找或findText)


Regarding to that question a small modification:

关于这个问题,一个小小的修改:

<html>
<head>

  <script>
  function fx(a,b)
  {
    if(window.find)
    {
      while(window.find(a))
      {

        var rng=window.getSelection().getRangeAt(0);
        rng.deleteContents();

        rng.insertNode(document.createTextNode(b));

      }
    }
    else if(document.body.createTextRange)
    {
      var rng=document.body.createTextRange();
      while(rng.findText(a))
      {
        rng.pasteHTML(b);
      }
    }
  }
  </script>
</head>
<body onload="fx('I am in body...','Yes')">
<div>Oh <span>I </span>am in body...<i>, wonderful</i></div>
</body>
</html>

#2


1  

you will get only the elements that contain the full text
without being a parent to some other element that contains the same text

您将只获得包含完整文本的元素,而不是包含相同文本的其他元素的父元素

var str = "some search text string";
var elements = $("*:contains('"+ str +"')").filter(
                  function(){
                      return $(this).find("*:contains('"+ str +"')").length == 0
                  }
               );

#3


1  

I think your code is work well, but your error is you didn't figure out the "body" content.

我认为您的代码工作得很好,但是您的错误是您没有理解“正文”内容。

Here is your code :

这是你的密码:

$(document).ready(function(){
    var body = $("body");    // your miss this
    var text = body.html();
    text = text.replace('I am in body...','Yes');
    body.html(text);
});

#4


0  

Try this:

试试这个:

$(function() {
    var foundin = $('body:contains("some search text string")');
});

Hope it helps

希望它能帮助

#1


4  

You should take a look at :

你应该看看:

ranges:(to modify text without overwriting the complete body)

范围:(修改文本而不覆盖整个正文)

IE: http://msdn.microsoft.com/en-us/library/ms535872%28v=vs.85%29.aspx
Others: https://developer.mozilla.org/en/DOM/range

例如:http://msdn.microsoft.com/en-us/library/ms535872%28v=vs.85%29.aspx:https://developer.mozilla.org/en/DOM/range


find()/findText()(to create the ranges)

find()/ findText()(创建范围)

IE: http://msdn.microsoft.com/en-us/library/ms536422%28v=vs.85%29.aspx
Others: https://developer.mozilla.org/en/DOM/window.find

例如:http://msdn.microsoft.com/en-us/library/ms536422%28v=vs.85%29.aspx:https://developer.mozilla.org/en/DOM/window.find

(Opera doesn't support find or findText)

(Opera不支持查找或findText)


Regarding to that question a small modification:

关于这个问题,一个小小的修改:

<html>
<head>

  <script>
  function fx(a,b)
  {
    if(window.find)
    {
      while(window.find(a))
      {

        var rng=window.getSelection().getRangeAt(0);
        rng.deleteContents();

        rng.insertNode(document.createTextNode(b));

      }
    }
    else if(document.body.createTextRange)
    {
      var rng=document.body.createTextRange();
      while(rng.findText(a))
      {
        rng.pasteHTML(b);
      }
    }
  }
  </script>
</head>
<body onload="fx('I am in body...','Yes')">
<div>Oh <span>I </span>am in body...<i>, wonderful</i></div>
</body>
</html>

#2


1  

you will get only the elements that contain the full text
without being a parent to some other element that contains the same text

您将只获得包含完整文本的元素,而不是包含相同文本的其他元素的父元素

var str = "some search text string";
var elements = $("*:contains('"+ str +"')").filter(
                  function(){
                      return $(this).find("*:contains('"+ str +"')").length == 0
                  }
               );

#3


1  

I think your code is work well, but your error is you didn't figure out the "body" content.

我认为您的代码工作得很好,但是您的错误是您没有理解“正文”内容。

Here is your code :

这是你的密码:

$(document).ready(function(){
    var body = $("body");    // your miss this
    var text = body.html();
    text = text.replace('I am in body...','Yes');
    body.html(text);
});

#4


0  

Try this:

试试这个:

$(function() {
    var foundin = $('body:contains("some search text string")');
});

Hope it helps

希望它能帮助