2

我需要在 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.

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

如果我正在搜索的字符串与 HTML 中的文本匹配，我需要突出显示 html 文档的一部分（在 php 或 javascript 中）。

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

例如，如果我正在搜索这个字符串“ This is text. ”，它应该与“This is text.”、“<anyhtmltag>This</anyhtmltag> is text.”、“This <anyhtmltag>is</ "anyhtmltag> text.", "This<anyhtmltag> is text</anyhtmltag>." 等等。

4

2 回答 2

3

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

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

使用 jQuery 查找文本？

使用jQuery查找文本字符串？

jQuery .wrap() 函数说明

这是一个非常简短的示例：

<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，所以如果没有任何错误，我无法检查我刚刚写的内容。你需要自己测试一下。

于 2012-06-25T12:10:45.227 回答
2

通过使用 JQuery，您可以向这样的元素添加类...

的HTML：

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

jQuery：

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

I would have a look at where you can put certain HTML elements, as it is not advisable to be putting things like div tags in p tags.

I hope this helps!

UPDATED

Okay, well you can use JQuery to wrap tags around your code.

If you need to remove the tags you can use PHP's strip tags function - this might help with comparing the text string without the HTML formatting - obviously will be done before the page has loaded in the browser. Not sure on a Javascript equivalent.

The wrap will allow you to get from your HTML to your Desired Output - That said, I would seriously consider the structure of your HTML to make sure it is the best it can be... might make life easier.

于 2012-06-25T12:20:15.687 回答