用匹配的文本突出显示一段HTML代码 [英] Highlight piece of HTML code with matching text

问题描述

我需要在html中找到文本，并突出显示该html，而不会破坏html本身，这是我突出显示的。

要替换的文字：

这是文字2.这是文字3 。

HTML：

 这是文字1.< p> 
这是< span>文字2< / span> ;.这< div>是< / div>文字3. 
< / p>这是文本4. 
  

期望输出：

 这是文字1.< p> 
< strong class =highlight>这是< span>文字2< / span> ;.这< div>是< / div>文字3.< / strong> 
< / p>这是文本4. 
  

编辑：对不起，如果我无法使用我需要突出显示html文档的一部分（在php或javascript中），如果字符串我在HTML中搜索匹配的文本。

但请记住，我搜索的字符串与搜索字符串不同，它可能包含一些额外的HTML。

例如如果我在搜索这个字符串这是文本。，它应该与This is text。，< anyhtmltag>这是< / anyhtmltag>是文本。，This < anyhtmltag>是文本。，这个< anyhtmltag>是文本< / anyhtmltag>。等等。

解决方案

您需要更具体一些，如果您想通过服务器端实现此目的（使用PHP例如，并返回到浏览器已包含突出显示输出的HTML代码）或客户端（例如使用jQuery来查找和突出显示服务器返回的HTML中的某些内容）？

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

使用jQuery查找文本字符串？

下面是一个非常简短的例子：

 < script> 
 $（'div：contains（This is< span> Text 2< / span> ;.这< div>< / div> text 3）'wrap（< strong class =亮点 >< /强> 中）; 
< / script> 
  

它通常会发现，你想要找到并用你想要的东西包装它。

这个工作，当你想要找到的文本是在一个div里面，这就是为什么我用 $（'div：contains 。如果你想搜索整个页面，你可以使用 $（'*：包含>。

这是jQuery和客户端突出显示的示例。对于PHP（服务器端）版本，请在Google或StackOverflow上进行一些搜索，您一定会找到很多示例。

编辑：至于你更新的问题，如果你使用任何文本框来放置，你想要搜索什么，你当然可以使用类似这样的东西：

 < script> 
 $（＃mysearchbox）。change（
 {
 $（'div：contains（$（＃mysearchbox）'）。wrap（< strong class =highlight>< / strong>）; 
}） ; 
< / script> 
  

，并在其他地方定义您的搜索框，例如：

 < input id =mysearchbox>< / input> 
  

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

I need to find text in html and highlight that html without corrupting html itself which i being highlighted.

Text to Replace:

This is text 2. This is Text 3.

HTML:

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

Desired Output:

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.

EDIT: Sorry, if I was not able to explain properly.

I need to highlight a portion of html document (in php or javascript) if string i am searching matches to text in HTML.

But remember that the string i am searching my not be identical to search string, it may contain some extra HTML.

For example if i am searching for this string "This is text.", it should be matched with "This is text.", "<anyhtmltag>This</anyhtmltag> is text.", "This <anyhtmltag>is</anyhtmltag> text.", "This<anyhtmltag> is text</anyhtmltag>." and so on.

解决方案

You need to be more specific, if you want to achieve this by either server-side (using PHP for example and returning to browser a HTML code already containing highlighted output) or client-side (using a jQuery for example to find and highlight something in HTML returned by server)?

It seems to me, that you just asked a question, without doing nothing (like searching the net), as finding proper solution for jQuery (client-side) took me around TEN seconds! And three most important search results were on StackExchange and jQuery documentation itself.

Find text using jQuery?

Find text string using jQuery?

jQuery .wrap() function description

Here is an example in a very brief:

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

It generally finds, what you want to find and wraps it with what you want it to be wrapped with.

This works, when the text you want to find is inside some div, that is why, I used $('div:contains. If you want to search whole page, you can use $('*:contains instead.

This is example for jQuery and client-side highlighting. For PHP (server-side) version, do some little searching on either Google or StackOverflow and you'll for sure find many examples.

EDIT: As for your updated question. If you are using any textbox to put there, what you want to search, you can of course use something like this:

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

and define your search box somewhere else for example like this:

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

This way, you're attaching an onChange event to your search box, that will be fired anytime you type anything to it and that should find (and highlight) anything you entered. Note that this examples are from-hand (from memory). I don't have access do jQuery from where I'm writing, so I can't check, if there aren't any mistakes, in what I've just wrote. You need to test it yourself.

这篇关于用匹配的文本突出显示一段HTML代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！