RegEx matching in Javascript?

[Jaxel]

Lets say I have some code....

<img src="dir/cas.jpg"><img src="dir/ast.jpg">

I want to match this string to an array, using the values in the above code to the variable $matches to return the following:

matches[0] = cas
matches[1] = ast

Then I want to put all the results into a single string:

output = cas,ast

How would I do this? I know how to match in PHP, but Javascript is different.

--------------- Added [DATE]1248292603[/DATE] at [TIME]1248292603[/TIME] ---------------

revised my requirements...

--------------- Added [DATE]1248315264[/DATE] at [TIME]1248315264[/TIME] ---------------

So no one has any ideas for me?

This is the last thing I need for an AJAX script I am working on.

[Deceptor]

<script type="text/javascript">
<!--

var teststring = '<img src="dir/cas.jpg"><img src="dir/ast.jpg">';

function fetch_image_names(code)
{
	matches = new Array();

	while (code.match(/(<img src="dir\/(.+?)\.jpg">)/i))
	{
		matches.push(RegExp.$2);

		code = code.replace(RegExp.$1, '', code);
	}

	return matches;
}

alert('The string yielded the following results: ' + fetch_image_names(teststring).join(','));

-->
</script>

Should do the job for you, following the exact code you posted that is.

[Jaxel]

This works great... But I am having one issue incorporating this with Ajax...

This is the text field to be edited...

<div class="editUse"><img src="ranking/usage/amy.gif"></div>

When I click on the div, the following Javascript process runs:

function editBox_use(actual) {
	if(!changing) {
		actual.innerHTML = fetch_usage(actual.innerHTML).join(',');
		actual.innerHTML = "<input id=\""+ actual.id +"_field\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onblur=\"return fieldBlur(this,'" + actual.id + "');\" style=\"width:50px; text-align:center; font-size:12px; \" />";
		changing = true;
	}
	actual.firstChild.focus();
}

function fetch_usage(code) {
	matches = new Array();
	while (code.match(/(<img src="\w+\/usage\/(\w+?)\.gif">)/i)) {
		matches.push(RegExp.$2);
		code = code.replace(RegExp.$1, '', code);
	}
	return matches;
}

This works great, and the text box correctly fills out with "amy". After I edit the box, the following PHP script is run:
($input is the new value where "amy" once was, lets say for now it is "cas")

function update_score($input)
{
	global $thumbdir;

	$input = str_replace(' ','',$input);
	$input = strtolower($input);

	$uses = explode(',',$input);

	foreach ($uses as $use)
	{
		$usage .= '<img src="'.$thumbdir.'/usage/'.$use.'.gif">';
	}

	echo $usage;
}

Running this script properly and returns the image for "cas" right on the page:

<div class="editUse"><img src="ranking/usage/cas.gif"></div>

However, now a new issue comes up... THEORETICALLY, if I click on the div AGAIN (without refresshing the page), it should return the text box filled out with the word "cas". It doesn't instead it gives me a blank text box. If I refresh the page, it works fine, but if I don't (which is the purpose of AJAX), the regex script fails.

Is there something wrong with the way the new HTML is echoed out that makes it fail the matching?

[1Unreal]

w3schools covers this nicely http://www.w3schools.com/jsref/jsref_obj_regexp.asp

[Deceptor]

Where do you insert the returned HTML? Obviously when AJAX is returning the response and you're inserting that response it's not doing so correctly, that or the original HTML is stored in a variable and not grabbed each time it's ran.

I'd probably have to see the page with the JS to get the full scope and identify the issue.

[Jaxel]

Okay... I have set up a test page... (IE only)
http://www.8wayrun.com/test.html

It uses 2 other files... the test.JS file (link on the page above), and a test.PHP file: contents below:

<?php

$field = explode('_',$_GET['fieldname']);
$input = $_GET['content'];

if ($field[0] == "score") { update_score($field,$input); }

function update_score($field,$input)
{
	global $vbulletin, $thumbdir;

	$input = str_replace(' ','',$input);
	$input = strtolower($input);

	if (!$input) { echo '&nbsp;'; exit; }
	$uses = explode(',',$input);

	foreach ($uses as $use)
	{
		$usage .= '<img src="ranking/usage/'.$use.'.gif">';
	}

	echo $usage;
}

?>

If you to that page, you will understand my problem more. If you click on the image bar, it will return the following text: "cas,sig,hil,cer,xia". You can then change the text, for instance, type in "tir,tal,tak". Instead of those 5 previous images, you will get 3 different images. That is working as intended...

Now, click on the image bar again, without refreshing the page. Instead of it returning "tir,tal,tak", it returns an empty text box. This is my problem.

[Deceptor]

Change:

	while (code.match(/(<img src="\w+\/usage\/(\w+?)\.gif">)/i)) {

To:

	while (code.match(/(<img src=".+?\/usage\/(\w+?)\.gif">)/i)) {

When the HTML is returned through AJAX, the browser renders the image path as the relative URL, meaning the pattern \w+ will fail the second time, the greedy .+? fixes this.

[Jaxel]

Wow... that really fixed it... thanks so much...

--------------- Added [DATE]1248471182[/DATE] at [TIME]1248471182[/TIME] ---------------

I'm having problems with this code...

function fetch_usage(code) {
	matches = new Array();
	while (code.match(/(<img src="\w+\/usage\/(\w+?)\.gif">)/i)) {
		matches.push(RegExp.$2);
		code = code.replace(RegExp.$1, '', code);
	}
	return matches;
}

Works in IE... doesn't work in FF.

[Deceptor]

That code you posted is the old function, did you mean the new one with the edit I specified above?

[Jaxel]

I figured out the problem... this line does not work in firefox...

code = code.replace(RegExp.$1, '', code);

I changed it to:

code = code.replace(RegExp.$1, '');

And now it works fine.

This is what I used this for: http://www.8wayrun.com/video.php?do=...s&videoid=1045 (watch the video)