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.

编辑：很抱歉，如果我无法正确解释。

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

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

例如，如果我要搜索此字符串“这是文字。”，则应与“这是文字。”，“＆lt; anyhtmltag＆gt;此＆lt; / anyhtmltag＆gt;是文本匹配。“，”此＆lt; anyhtmltag＆gt;是＆lt; / anyhtmltag＆gt; text。“，”此＆lt; anyhtmltag＆gt;是文字＆lt; / anyhtmltag＆gt;。“等等。

Answer 1

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

在我看来，你刚问了一个问题，没有做任何事情（比如搜索网络），因为找到jQuery（客户端）的正确解决方案花了我几秒钟！三个最重要的搜索结果是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的结构，以确保它是最好的......可能会让生活更轻松。

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

2 个答案: