找到某些单词并替换它们

Posted 2023-05-07

【中文标题】找到某些单词并替换它们

【英文标题】：Find certain words and replace them

【发布时间】：2012-11-09 19:12:47

【问题描述】：

我想找：

“纽约”并将其替换为“纽约市” “Washington”并将其替换为“Seattle” “佛罗里达”并将其替换为“杰克逊维尔” “南卡罗来纳州”并将其替换为“哥伦比亚” “West_Virginia”并将其替换为“Charleston”

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

演示：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>

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

【参考方案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'));

【讨论】：

那是因为你的 td 在 DOM 中间是孤立的。我用p 替换它，它可以工作：jsfiddle.net/N3ZmS/3

是的......只需正确构造 td ：jsfiddle.net/N3ZmS/4 。如果您的 td 在 DOM 中是孤立的，那么您需要先解决该潜在问题。

我不知道这个例子的结构很重要，但在这种情况下确实如此！ ;) 感谢朱利安的所有帮助！

【参考方案2】：

您需要将新的字符串值应用到 DOM 元素

document.getElementById("replace-them").innerHTML =
    document.getElementById("replace-them").innerHTML.replace("New York", "New York City");
// etc.

顺便说一句，在定义函数replaceWords() 之后，您还需要确保您确实调用了它。

您还需要使用div 或类似元素才能正确呈现标记。

工作fiddle here。