javascript - 正则表达式 Javascript 替换？

Question

我正在尝试制作一个过滤器，它有很多选项列在过滤器框的顶部，现在，我正在尝试添加国家，我决定使用正则表达式。但我无法让它工作，由于某种原因它在字符串的中间而不是开头替换。

JS代码：

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 代码：

<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 显示问题所在：jsFiddle

我正在尝试使它替换当前<b>Location</b>: [some country] |的<b>Location</b>: [some other country] |

Answer 1

您不应该为此使用正则表达式，而是将您的目标放入它自己的标签中，例如：

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

然后仅替换此标记内的内容，例如：

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

Answer 2

尝试

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"));
}

演示：小提琴

Answer 3

如果要在字符串的开头替换，只需^在正则表达式的开头使用，它与开头匹配（$匹配结尾）

所以你的代码是：

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}/, "") + " | "));
}

编辑：如果您想替换字符串中 2 个或更多空格的任何空格，您可以将其用作您的正则表达式：/^(\s){2,}/

Answer 4

通过 RegExp 构造函数和字符串创建正则表达式对象时，必须将反斜杠加倍。最好只使用本机语法：

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

在您的代码中，\s子表达式被sJavaScript 标记器转换为纯文本，因为它识别了字符串常量。