使用 JavaScript 在 Asp.net mvc 中突出显示 html 文档表达式
Posted
技术标签:
【中文标题】使用 JavaScript 在 Asp.net mvc 中突出显示 html 文档表达式【英文标题】:Highlighting an html document expression in Asp.net mvc using JavaScript 【发布时间】:2017-09-19 07:59:03 【问题描述】:我正在尝试突出显示网络浏览器上显示的 html 文档中的特定句子。
我的控制器中有这个动作:
public ActionResult GetHtmlPage(string path)
return new FilePathResult(path, "text/html");
我有这个 view 显示指定路径中的 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>
但是句子没有突出显示,我不知道为什么。
有什么建议吗?
【问题讨论】:
Find a sentence in an html page displayed in the browser and Highlight it的可能重复 我检查了你之前的问题答案。这个问题看起来不错。 你的变量很好。但是你的 HTML 有问题。 “要求”之后的换行符。 【参考方案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
【讨论】:
我有一个更大的文档,我想突出显示“The Business” @NasriYatim 你应该使用这个johannburkard.de/blog/programming/javascript/… @NasriYatim 我已经更新了答案并下载 jquery.highlight-5.js 文件,如果它不起作用 不工作,不突出和搞砸布局以上是关于使用 JavaScript 在 Asp.net mvc 中突出显示 html 文档表达式的主要内容,如果未能解决你的问题,请参考以下文章
在网格视图中的 ASCX 控件内的控件上使用 Javascript 显示隐藏。 (ASP.NET + Javascript)
使用 javascript/jquery 检测 Asp.Net 表单是不是有效
JavaScript、asp.net 和 Sql Server