RegEx Javascript replace?

Question

I'm trying to make a filter which has a lot of options that get listed in the top of the filter box, now, I'm trying to add the countries and I decided to use regex. But I can't get it to work, for some reason it replaces in the middle of the string instead of the beginning.

JS Code:

function countryCheck(object) {
    var filter = document.getElementById("search_filter");
    var re = new RegExp("<b>Location<\/b>:\s[a-zA-Z\s]+\s\|\s");
    filter.innerHTML = filter.innerHTML.replace(re, ("<b>Location</b>: " + object.value.replace("&nbsp;&nbsp;", "") + " | "));
}

HTML Code:

<div id='search_filter'><b>Filter</b>: <b>Location</b>: Anywhere | <b>Player Slots</b>: >=0/>=0</div>
<br />

<select class='select' style='width:100%;' onchange='countryCheck(this);'>
    <option>Anywhere</option>
    <option>Europe</option>
    <option>&nbsp;&nbsp;Sweden</option>
    <option>&nbsp;&nbsp;Germany</option>
    <option>&nbsp;&nbsp;United Kingdom</option>
    <option>&nbsp;&nbsp;France</option>
    <option>North America</option>
    <option>&nbsp;&nbsp;Canada</option>
    <option>&nbsp;&nbsp;United States</option>
    <option>&nbsp;&nbsp;Mexico</option>
</select>

jsFiddle showing what the problem is: jsFiddle

I'm trying to make so it replaces the current <b>Location</b>: [some country] | with <b>Location</b>: [some other country] |

Answer 1

You should not use a regex for this but put your target into a tag of its own like:

<div id="search_filter">
     <b>Filter</b>: <b>Location</b>: 
     <span id="search_filter_location">Anywhere</span>
      | <b>Player Slots</b>: >=0/>=0
</div>

and then replace the content inside this tag only like:

function countryCheck(object) {
    var filter = document.getElementById("search_filter_location");
    filter.innerHTML = object.value.replace("  ", "");
}

Answer 2

If you want to replace in the beginning of your string just use ^ at the beginning of your regex, which matches the beginning ($ matches the end)

So your code would be:

function countryCheck(object) {
    var filter = document.getElementById("search_filter");
    var re = new RegExp("<b>Location<\/b>:\s[a-zA-Z\s]+\s\|\s");
    filter.innerHTML = filter.innerHTML.replace(re, ("<b>Location</b>: " + object.value.replace(/^(\s){2}/, "") + " | "));
}

Edit: If you want to replace any spaces where it's 2 or more spaces atthe begging on your string, you could use this as your regex: /^(\s){2,}/

Answer 3

When you make a regular expression object via the RegExp constructor and a string, you must double the backslashes. It's really better to just use native syntax:

    var re = /<b>Location<\/b>:\s[a-zA-Z\s]+\s\|\s/;

In your code, the \s subexpressions were being turned into just plain s by the JavaScript tokenizer as it recognized the string constant.

Answer 4

Try

function countryCheck(object) {
    var filter = document.getElementById("search_filter");
    var re = /(<b>Location<\/b>:\s)([^|]+)(|)/;
    filter.innerHTML = filter.innerHTML.replace(re, ("$1" + object.value.replace("&nbsp;&nbsp;", "") + " $3"));
}

Demo: Fiddle