0

I'm trying to replace a part of an HTML document using RegEx.

Take this example:

for (; document.body.innerHTML.indexOf(/ea/) != -1;) {
  document.body.innerHTML = document.body.innerHTML.replace(/ea/, "x");
}
I eat food and read books.

But how would I replace part of the HTML tag (root element) and not remove anything? (event listeners, etc)?

function x(e) {
return document.querySelector(e);
}
x("textarea").value = document.documentElement.outerHTML;
x("button").addEventListener("click", function() {
console.log("button pressed");
for (; document.body.innerHTML.indexOf(/the-language/) != -1;) {
  document.body.innerHTML = document.body.innerHTML.replace(/the-language/, "x");
}
x("textarea").value = document.documentElement.outerHTML;
});
<!DOCTYPE html>
<html lang="the-language">
<p>the-language</p>
<p>There is a button with an event listener, and the HTML tag has the word I'm replacing. The event listener is removed and the root element (html) isn't changed.</p>
<button>Click me to replace and then show new content in textarea</button>
<p>the-language</p>
<textarea></textarea>
</html>
noname
  • 291
  • 1
  • 12

1 Answers1

0

You want to change the attribute using setAttribute of course. You can:

document.querySelector("html").setAttribute('lang', 'other-lang');

Other than that, check out my recent answer about changing only text nodes. For example this one

IT goldman
  • 14,885
  • 2
  • 14
  • 28