在浏览器中显示的html页面中找到一个句子并突出显示

2022-01-19 00:00:00 frontend jquery javascript html asp.net-mvc

我正在使用 asp.net mvc 来显示一个 .html 文档,我知道它包含什么.

我的控制器中有这个方法:

public ActionResult GetHtmlPage(字符串路径){return new FilePathResult(path, "text/html");}

我有这个简单的视图:

<代码>@{ViewBag.Title = "管理文档";}<h2>管理文档</h2>@Html.Action("GetHtmlPage", "myController", new { path = Model.documentPath })

文档显示没有问题.但我想突出显示我知道它存在于文档某处的特定句子.

我的意思是,我正在尝试实现一个 JavaScript 代码,也许是为了找到我想在文档中突出显示的特定句子并突出显示它!我在 JavaScript 中阅读了有关 window.find() 的信息,但我的 asp.net 解决方案似乎无法识别它.

我正在使用 VS2015 企业版

解决方案

您可以使用 jQuery 用一些标签包装文本并应用您可能需要的任何自定义样式.假设您有以下标记:

这是一些具体的句子</div>

而你想要这样结束:

这是<strong>一些具体的</strong>句子</div>

您可以尝试使用 :contains 选择器来定位文本的所需部分,然后用一些标签将其包装起来:

$("div:contains('some specific')").html(function(_, html) {return html.replace(/(some specific)/g, "<strong>$1</strong>");});

这里有一个 示例小提琴.

I'm using asp.net mvc to display a .html document that I know exactly what it contains.

I have this method in my controller:

public ActionResult GetHtmlPage(string path)
{
    return new FilePathResult(path, "text/html");
}

and I have this Simple view:

@{
ViewBag.Title = "ManageDocument";
}
<h2>ManageDocument</h2>
@Html.Action("GetHtmlPage", "myController", new { path = Model.documentPath })

The document is displayed with no problems. But i want to Highlight a specific sentence that I know it exists somewhere in the document.

What I mean is, I'm trying to implement a JavaScript code maybe to find that specific sentence i want to highlight in the document and highlight it! I read about window.find() in JavaScript but my asp.net solution doesn't seem to recognize it.

I'm using VS2015 Enterprise

解决方案

You could use jQuery to wrap the text with some tags and apply whatever custom styles you might need. Let's suppose that you have the following markup:

<div>
    This is some specific sentence
</div>

and you want to end up with this:

<div>
    This is <strong>some specific</strong> sentence
</div>

You could try the :contains selector to locate the desired portion of the text and then wrap it with some tags:

$("div:contains('some specific')").html(function(_, html) {
   return html.replace(/(some specific)/g, "<strong>$1</strong>");
});

And here's a sample fiddle.

相关文章