突出显示具有匹配文本的HTML代码块

Question

我需要在html中查找文本，并突出显示该html，而不会破坏html本身，而我将突出显示。

要替换的文本：

这是文本2.这是文本3.

HTML：

This is text 1. <p> 
This is <span>Text 2</span>. This <div>is</div> text 3. 
</p> This is Text 4. 

所需的输出：

This is text 1.<p> 
<strong class="highlight">This is <span>Text 2</span>. This <div>is</div> text 3. </strong> 
</p> This is Text 4. 

编辑：对不起，如果我无法正确解释。

需要特别提出的（在PHP或JavaScript）HTML文档的一部分，如果字符串我正在寻找比赛中的HTML文本。

但请记住，我正在寻找字符串我不等同于搜索字符串，它可能包含一些额外的HTML。

例如，如果我在寻找这个字符串“这是文本。”，它应该匹配“这是文本”，“< anyhtmltag>这</anyhtmltag>为文本。”，“这< anyhtmltag>是</anyhtmltag>文本。“， ”这< anyhtmltag>是文本</anyhtmltag>“。等等。

Answer 1

您需要更具体的，如果你想通过任一服务器端来实现这一（使用PHP例如，返回到浏览器已经包含高亮输出HTML代码）或客户端（使用一个jQuery的例子找到并突出显示服务器返回的HTML中的内容）？

在我看来，你只是问了一个问题，没有做任何事情（如搜索网络），因为找到适当的解决方案（客户端）花了我约十秒！三个最重要的搜索结果在StackExchange和jQuery文档本身。

Find text using jQuery?

Find text string using jQuery?

jQuery .wrap() function description

这里是一个非常简单的例子：

<script> 
    $('div:contains("This is <span>Text 2</span>. This <div>is</div> text 3")')wrap("<strong class="highlight"></strong>"); 
</script> 

它一般认为，想要找到什么，什么你把它包装希望它被包裹着。

这工作，当你想查找的文本是一些DIV中，这就是为什么我用$('div:contains。如果您要搜索整个页面，则可以使用$('*:contains。

这是例如用于jQuery和客户端高亮。对于PHP（服务器端）版本，请在Google或StackOverflow上进行一些搜索，并确保找到很多示例。

编辑：至于你更新的问题。如果你正在使用的任何文本框放在那里，你要搜索什么，你当然可以使用这样的：

<script> 
    $("#mysearchbox").change(
    { 
     $('div:contains($("#mysearchbox")').wrap("<strong class="highlight"></strong>"); 
    }); 
</script> 

和定义搜索框别的地方，例如像这样：

<input id="mysearchbox"></input> 

通过这种方式，您可以将onChange事件附加到您的搜索框中，只要您输入任何内容并且应该找到（并突出显示）您输入的任何内容，就会触发该事件。 请注意，这个例子是从手中（从内存）。我无法从我写的地方访问jQuery，所以我无法检查，如果没有任何错误，我刚才写的。你需要自己测试一下。

Answer 2

通过使用JQuery，你可以添加类这样的要素...

的HTML：

<p id='myParagraph'>I need highlighting!</p> 

jQuery的：

$(document).ready(function(){ 
    $('#myParagraph').addClass('highlight'); 
}); 

我想看看在那里你可以放置某些HTML元素，因为不建议在p标签中加入div标签等东西。

我希望这有助于！

修订

好了，好了，你可以使用jQuery在你的代码wrap标签。

如果您需要删除标签，您可以使用PHP的strip tags函数 - 这可能有助于比较没有HTML格式的文本字符串 - 显然将在页面加载到浏览器之前完成。不能确定在Javascript的等效。

这个包装可以让你从你的HTML获得你想要的输出 - 也就是说，我会认真考虑你的HTML结构，以确保它是最好的...可以让生活更轻松。