我正在试着把文本中的一个单词换成我选择的单词

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function replacment() {
let text = document.getElementById('text')
let button1 = document.getElementById('text')
let button2 = document.getElementById('text')
let text3 = text.replace(new RegExp(text1, 'g'), text2);
document.getElementById("text").innerHTML = text3
}
</script>
</head>
<body>
<h1 id="text">Steve Jobs was genuis, and many Apple inventions today are result for his great effort, thanks Steve, waw Steve was great.</h1>
<label>search for:</label>
<br />
<input type="text" id="button1" />
<br />
<label>Replace with:</label>
<br />
<input type="text" id="button2" />
<br />
<br />
<input type="button" value="Replace"/>
</body>
</html>

我希望能够将文本中的一个单词转换为我在第二个框中键入的新词。在第一个框中，我想从上面的文本中键入一个将被更改的单词我正在使用HTML和JavaScript

首先，从上到下解析HTML。所以当你使用时

document.getElementById("text")

它将返回null，因此您不能在null上设置属性。因为在执行此语句时，元素不存在
因此要解决问题

将script标记放在关闭</body>之前，而不是放在<head>标记中
另一个选项是监听DOM已经加载了CCD_ 5&CCD_ 6或简单地与CCD_

但是随着defer属性的到来，我们可以将script放置在头中，并且仍然可以获得这一好处，同时浏览器可以将JS与HTML并行下载，以获得更好的性能。

document.querySelector("#replaceBtn").addEventListener("click", replacment);
function replacment() {
let text = document.getElementById("text");
let searchWord = document.getElementById("searchTxt").value;
let replaceWith = document.getElementById("replaceTxt").value;
console.log(text, searchWord, replaceWith);
text.innerText = text.innerText.replace(
new RegExp(searchWord, "g"),
replaceWith
);
}

<h1 id="text">
Steve Jobs was genuis, and many Apple inventions today are result for his
great effort, thanks Steve, waw Steve was great.
</h1>
<div>
<label>search for:</label>
<input type="text" id="searchTxt" />
</div>
<div>
<label>Replace with:</label>
<input type="text" id="replaceTxt" />
</div>
<input type="button" value="Replace" id="replaceBtn" />

let text = document.getElementById('text').textContent
let input = document.getElementById('input')

input.addEventListener('input', () => {
let newtext = text.replace('steven', input.value);
document.getElementById('text').textContent = newtext
})

<h1 id='text'>hello world my name is steven i love programming</h1>
<input id='input'>

相关内容

最新更新

热门标签：