使用JavaScript突出显示Asp.net mvc中的html文档表达式

Question

我正在尝试突出显示在Web浏览器上的html文档中的特定句子。

我在我的控制器中有这个动作：

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

我有这个视图 ，显示指定路径中的html文档。

@model TextPlagiarismWebApp.Models.ViewModels.ManageDocumentViewModel

@{
    ViewBag.Title = "ManageDocument";
}

<h2>ManageDocument</h2>

@Html.Action("GetHtmlPage", "Upload", new { path = Model.documentPath })

<script type="text/javascript">
    var sen = @Model.sentence["sentence"];
    $("div:contains('" + sen + "')").html(function (_, html) {
        var regex = new RegExp("(" + sen + ")", "g");
        return html.replace(regex, '<span style="background-color:#FFFF00">$1</span>');
    });
</script>

我调试了程序，sen变量是我所期望的：

var sen = @Model.sentence["sentence"];

但尽管如此，它并没有强调我正在寻找的特定句子。 它只显示原始的html文档。

让我们以这个例子来判断句子是否存在：

var sen = "Requirements for breeding tanks vary with each species. Separate tanks may be required."

HTML：

<p class=MsoNormal style='text-align:justify;mso-layout-grid-align:none;
text-autospace:none'><span lang=EN-AU style='color:black'>Requirements for
breeding tanks vary with each species. Separate tanks may be required.<o:p>
</o:p></span></p>

但这个句子没有突出显示，我无法弄清楚原因。

关于什么是错的任何建议？

Answer 1

你可以这样做

  $("body").html(function (_, innerHTML) {
        var regex = new RegExp("(" + sen + "'))", "g");
        return innerHTML.replace(/\s\s+/g, ' ').replace(/\r?\n|\r/g, '').replace(regex, '<span style="background-color:#FFFF00">$1</span>');
    });

第一个替换将.replace(/\\s\\s+/g, ' ')将删除多个空格而.replace(/\\r?\\n|\\r/g, '')将删除段落中的断行

这里是示例https://jsfiddle.net/jz86v8we/10/

编辑

您可以通过添加使用Jquery-Highlight-5.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script src="http://johannburkard.de/resources/Johann/jquery.highlight-5.js"></script>

并在脚本中使用

$("body").highlight("The Business");

并将其添加到您的css文件中

.highlight { background-color: yellow }