Highlighting an html document expression in Asp.net mvc using JavaScript

I'm trying to highlight a specific sentence in an html document displayed on the web browser.

I have this action in my controller:

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

and I have this view that shows the html document in the specified path.

@model TextPlagiarismWebApp.Models.ViewModels.ManageDocumentViewModel

    ViewBag.Title = "ManageDocument";


@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>');

I debugged the program and the sen variable is what I would expect:

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

But despite that, it's not highlighting the specific sentences that I'm looking for. It only shows the original html document.

Let's take this example where I'm sure the sentence exists:

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


<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>

But the sentence is not highlighted, and I can't figure out why.

Any suggestions as to what's wrong?



you can do this

  $("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>');

the first replace will .replace(/\s\s+/g, ' ') will remove multiple spaces and .replace(/\r?\n|\r/g, '') will remove the break line in paragraph

here is example https://jsfiddle.net/jz86v8we/10/


you can use Jquery-Highlight-5.js by adding

<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>

and in script use

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

and add this to your css file

.highlight { background-color: yellow }


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.