How to fix "A potentially dangerous Request.Path value was detected from the client (<)."

In that view I have a search function where each word searched will be highlighted. when I only click one button without doing a search it works. but if I do a search first, and click on the words that are highlighted I get an error.

Server Error in '/' Application. [HttpException (0x80004005): A potentially dangerous Request.Path value was detected from the client (<).].

any idea to fix it? below is my code

<style>
#search_para {
    color: grey;
}

.highlight {
    background-color: yellow;
}
</style>

<div id="wrapper">
  <input type="text" id="search_text">
  <input type="button" value="search" id="search">
</div>

<div id="inputText1">
  <ul>
        @Html.ActionLink("Form User", "Index", "User", null, new { @class = "btn btn-primary" })
        @Html.ActionLink("Form Role", "Index", "Role", null, new { @class = "btn btn-primary" })
        @Html.ActionLink("Form Transaction", "Index", "Transaction", null, new { @class = "btn btn-primary" })        
  </ul>
<div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var searchpara = document.getElementById("inputText1").innerHTML;
    searchpara = searchpara.toString();
    document.getElementById("search").onclick = function () { highlight_word(searchpara) };
}, false);

function highlight_word(searchpara) {
    var text = document.getElementById("search_text").value;
    if (text) {
        var pattern = new RegExp("(" + text + ")", "gi");
        var new_text = searchpara.replace(pattern, "<span class='highlight'>" + text + "</span>");
        document.getElementById("inputText1").innerHTML = new_text;
    }
}
</script>