使用jQuery / Javascript从MVC模型解析和修改HTML

Question

This needs to be done on the client (please trust me, I'll save the explanation).

I have a razor view that renders partial views in a loop. viewModel is just another class.

@{
  foreach (ObjectName objInstance in Model.Collection)
  {
    @Html.Parial(partialViewName, viewModel)
  }
}

And the partial view ultimately renders HTML from a viewModel property (this obviously occurs many times since this partial view is rendered in a loop).

@Html.Raw(Model.GetPropertyTextValue())

The HTML from GetPropertyTextValue() can look something like this:

<ul>\r\n<li>2,3,6-Tri-O-methyl-D-glucose (<a target=\"_blank\" href=\"http://www.blahblah.com/pubmed/12345?name=value\">1</a>) , 2,3,6-tri-O-methyl-D-mannose, 3-O- blah blah</ul>

I need to take the value in Model.GetPropertyTextValue and parse through it, replacing the entire URL (to blahblah.com) with a different link (but keep any numbers like the "12345"). Such URLs could appear multiple times in the string.

I believe this should be done with jQuery/Javascript, but I'm not sure how to approach it. Can anyone please suggest how to go about this? Thank you.

Answer 1

If you absolutely have to do on the client side, you can try something like this. First wrap your generated content with an identifiable div, so that you will be able to act within that container only:

<div id="items-to-parse">
    @{
      foreach (ObjectName objInstance in Model.Collection)
      {
        @Html.Partial(partialViewName, viewModel)
      }
    }
</div>

Then create a simple script that searches for all links within that container and changes their href attribute:

    $('#items-to-parse a').each(function() {
        $(this).attr('href', 'http://the.new.url');
    });