JavaScript marking last occurrence in regular expression

Question

I have the following task to do: Write a web page with two text areas T1 and T2. The user enters a string into the text area T1 to present a regular expression. Then the user enters some text into the text area T2. Your code should output the text of T2 with highlighted elements corresponding to the matches for the regular expression of T1. Additional requirement for my task is to match the last occurrence only.

This is what I have so far:

<script>

var str = "This is really cooly";
str = str.replace(/\ly(?=[^\ly]*)$/, "BA");

document.write(str + '<br>');

</script>

but this only matches if the last word ends with "ly".

I managed to do this with the form but only for the first occurrence.

<html>
<body>

<p id="demo">Click the button to display the matches.</p>
<form name="My_form" id="My_form">
T1:<input type="text" name="T1" id="T1" size=200>
<br>
T2:<input type="text" name="T2" id="T2" size=200>

</form>
<br>
<button onclick="myFunction()">Try it</button>

<script type="text/javascript">
function myFunction()
{
  var regex = document.My_form.T1.value;
  var n = regex.match(document.My_form.T2.value);
  var result = regex.replace(n, '<b>$&</b>');
  document.getElementById('demo').innerHTML = result;
}
</script>

</body>
</html>

I don't know how to convert a user input into e pattern to search into a regular expression (I am not sure if that is even possible. This is burning my brain for more than a week and I have less than 24 hours to complete this.

Stack Overflow generally isn't very acceptive to homework questions. Just so you know :) — Undo, May 26 '13 at 02:50
Most of the questions here are homework related if you ask me. I have this impression after checking the questions asked related to regexp. The fact is that I don't lie and I am not hiding why is this all about. :) — Terrax, May 26 '13 at 03:25

nhahtdh · Answer 1 · 2014-11-21T03:33:12.813

The user enters a string into the text area T1 to present a regular expression.

If it really is a regular expression, then you might want to try-catch the exception thrown when you feed the regular expression to RegExp constructor, in case the input is invalid. I assume the regular expression is entered without the delimiters and the flags.

If the requirement actually asks you to find T1 in T2, then you can just use String.indexOf function to search for the string.

Your code should output the text of T2 with highlighted elements corresponding to the matches for the regular expression of T1. Additional requirement for my task is to match the last occurrence only.

To highlight the text, you need the index of the match(es).

In the construction of the RegExp instance, pass in g (global) flag to the constructor. Then you can use RegExp.exec in a loop to find out the index and the length of all matches according to the regular expression.

var regex,
    arr,
    output;

try {
    regex = new RegExp(inputT1, 'g');
} catch (e) {
    console.log("Invalid regular expression");
}

while ((arr = regex.exec(inputT2)) !== null) {
    // Starting index of the match
    var startIndex = arr.index;

    // Ending index of the match
    var endIndex = arr.index + arr[0].length;

    // If you only want to highlight the last occurrence only, it can be done by
    // storing the result of previous call to RegExp.exec, then process it
    // outside the loop.

    // Hope you can figure out the rest

    // Advance the lastIndex if an empty string is matched
    if (arr[0].length == 0) {
        re.lastIndex += 1;
    }
}

score 0 · Accepted Answer · edited Nov 21 '14 at 03:29

Thanks a lot for your help. This was helpful but I am not sure whether it covers the requirements of the task as I think it is a string manipulation algorithm.

I just managed to complete my task. My mistake was that I was trying to match the expression in the replace() function. The thing is that actually the expression should be created with the RegExp object directly.

Here it is my complete code:

var regex = new RegExp(document.My_form.T2.value+"(?!.*"+document.My_form.T2.value+")", 'g');
var result = document.My_form.T1.value.replace(regex, '<b><font color="blue">$&</font></b>');
document.getElementById("display").innerHTML=result;

Once again, thanks a lot for your help :)

JavaScript marking last occurrence in regular expression

2 Answers2