查找和替换 HTML 中的文本没有做任何事情

Question

我想使用用户指定的关键字查找和替换文本区域中的特定单词。

这是我的 HTML 文档的样子：

Message: </br>
    <textarea name="text" id="message" rows="3" col="20">Hello 202109</textarea> </br></br>
    Find: <input type="text" name="find" id="find" size="15"> Replace: <input type="text" name="replace" id="replace" size="15"> <br/>
    <button type="button" onclick="findAndReplace()">Find and Replace</button> <br/>

我将其用于 Javascript 函数：

function findAndReplace() {

let find = document.getElementById("find").innerHTML;
let replace = document.getElementById("replace").innerHTML;
let text = document.getElementById("message").innerHTML;
document.getElementById("message").innerHTML = text.replace(find, replace);

}

但是，当我打开我的网页并尝试单击“查找和替换”按钮时，没有任何反应，也没有文本被替换。检查网页也没有任何错误。

我做错了什么？任何帮助将不胜感激。

Answer 1

那是因为您使用的是 .innerHTML 而不是 .value。 .innerHTML 获取元素的内部标记，不能用于输入和文本区域。 .value 是您正在寻找的属性。

Answer 2

这是您问题的解决方案:)

function findAndReplace() {

let find = document.getElementById("find").value;
let replace = document.getElementById("replace").value;
let text = document.getElementById("message").value;
document.getElementById("message").value = text.replace(find, replace);

}

<textarea name="text" id="message" rows="3" col="20">Hello 202109</textarea> </br></br>
Find: <input type="text" name="find" id="find" size="15"> Replace: <input type="text" name="replace" id="replace" size="15"> <br />
<button type="button" onclick="findAndReplace()">Find and Replace</button> <br />

还有这个有趣的指南： https://superuser.com/questions/1037389/innerhtml-vs-value-when-and-why

查找和替换 HTML 中的文本没有做任何事情

Finding and replacing text in HTML not doing anything

html

javascript

replace