找到某些单词并替换它们

Question

我想找到:

" 纽约 "并将其替换为" 纽约市 "
" 华盛顿 ",并将其替换为" 西雅图 "
" 佛罗里达 ",并将其替换为" 杰克逊维尔 "
" 南卡罗来纳州 ",并将其替换为" 哥伦比亚 "
" West_Virginia "并替换它与" 查尔斯顿 "

我在下面制作了以下示例代码,但这似乎不起作用:

演示:http://jsfiddle.net/N3ZmS/

<td id="dont-replace-them">
New York<br />
Washington<br />
Florida<br />
South-Carolina<br />
West_Virginia<br />
</td>

<br />

<td id="replace-them">
New York<br />
Washington<br />
Florida<br />
South-Carolina<br />
West_Virginia<br />
</td>

<script type="text/javascript">
function replaceWords() {
    document.getElementById("replace-them").innerHTML.replace("New York", "New York City");
    document.getElementById("replace-them").innerHTML.replace("Washington", "Seattle");
    document.getElementById("replace-them").innerHTML.replace("Florida", "Jacksonville");
    document.getElementById("replace-them").innerHTML.replace("South-Carolina", "Columbia");
    document.getElementById("replace-them").innerHTML.replace("West_Virginia", "Charleston");
};  
</script>

任何人都知道应该修复什么才能使它工作？

Answer 1

.replace(); 返回被替换的字符串,它不会改变DOM中的字符串.

var str = 'foobar';
str.replace('foobar', 'lorem ipsum');    // Returns 'lorem ipsum', but does no DOM manipulation.

您需要将每个结果保存.replace()到临时变量中,然后再更新DOM.

function replaceWords(el) {
    el.innerHTML = el.innerHTML
                    .replace('New York', 'New York City')
                    .replace('Washington', 'Seattle')
                    .replace('Florida', 'Jacksonville')
                    .replace('South-Carolina', 'Columbia')
                    .replace('West_Virginia', 'Charleston');
}

replaceWords(document.getElementById('replace-them'));