在没有 div 的情况下更改 JS 中的按钮文本.class

Question

问题

我很难更改网站上的按钮文本。

<div>上没有一个类是我想要的目标，这就是为什么我很难进行此编辑。老实说，我对JS有一些基本的了解，所以我能理解它，但我还不够好，无法自己找到这个解决方案。

页面有简化代码：

<div class="notion-topbar">
<div>
<div class="notranslate">...</div>
<div>...</div>
<div role="button"> // I want to change the text in this <div>!
<svg>...</svg> my_text
</div>

如果你愿意，你可以在这里观看完整的页面并搜索"；顶条"：https://overwatch-guide.com我想用法语翻译"；搜索"；右上角的按钮。

潜在解决方案

我可能找到了解决方案的一部分，比如使用document.querySelector('input[type=button]').innerHTML = "Rechercher";，但我知道缺少了一些东西，因为我不想选择页面上的所有按钮。

我还发现了一种"；破解"；在CSS(一种我更熟悉的语言(中，但我不是这种解决方案的超级粉丝，因为CSS不是用来编辑文本的。就我的情况而言，我设想过：

.notion-topbar > div:nth-child(1n+3) > .button {
visibility: hidden
}
.notion-topbar > div:nth-child(1n+3) > .button:after {
visibility: visible;
display: block;
content: 'Rechercher';
position: absolute;
}

帮助

我真的需要你的帮助，因为我在这件事上很吃力。谢谢你抽出时间！

Answer 1

如果你不想使用一个类，你可以不给div分配一个id吗document.getElementById("YourIdName"(.innerHTML="；无论"什么"；；

Answer 2

也许是这样的？

document.querySelector('div[role=button]'(

Answer 3

因为按钮中有多个节点。您应该检查每个项目，如果它是文本节点，则替换内容。

PS：这个功能可以用于各种类型的元素，而不仅仅是按钮。

const replaceTextInElement = (element, find, replace, searchInChildren = false) => {
// Stop doing anything if the element is empty
if (!element.hasChildNodes()) return;

// Create regex to replace our provided word
const regex = new RegExp(find, "g");

// Loop over each child nodes of the element
for(const childNode of element.childNodes) {
// Replace the text if it is a text node
if(childNode.nodeType === Node.TEXT_NODE) {
// Replace the text with new text
childNode.textContent = childNode.textContent.replace(regex, replace);
} else if(searchInChildren) {
// Also replace text in children if we specified it to do so
replaceTextInElement(childNode, find, replace, searchInChildren);
}
}
}
// Don't do anything until the DOM is loaded
window.addEventListener("DOMContentLoaded", () => {
const searchBtn = document.querySelector(".search-button");
// Use the line below. I used the one above because i was to lazy to recreate all the html.
// const searchBtn = document.querySelector(".notion-topbar > div:nth-child(1) > div:nth-child(3)");
replaceTextInElement(searchBtn, "Search", "Rechercher");
// You can also go through each child if you need to by adding true as parameter
const anotherBtn = document.querySelector(".another-button");
replaceTextInElement(anotherBtn, "Search", "Zoeken", true);
});

<div class="search-button">
<div>Search level 2 (your SVG)</div>
Search level 1
</div>
<br/><br/>
<div class="another-button">
<div>Search level 2 (your SVG)</div>
Search level 1
</div>

无评论：

const replaceTextInElement = (element, find, replace, searchInChildren = false) => {
if (!element.hasChildNodes()) return;

const regex = new RegExp(find, "g");

for(const childNode of element.childNodes) {
if(childNode.nodeType === Node.TEXT_NODE) {
childNode.textContent = childNode.textContent.replace(regex, replace);
} else if(searchInChildren) {
replaceTextInElement(childNode, find, replace, searchInChildren);
}
}
}
window.addEventListener("DOMContentLoaded", () => {
const searchBtn = document.querySelector(".search-button");
replaceTextInElement(searchBtn, "Search", "Rechercher");
const anotherBtn = document.querySelector(".another-button");
replaceTextInElement(anotherBtn, "Search", "Zoeken", true);
});

<div class="search-button">
<div>Search level 2 (your SVG)</div>
Search level 1
</div>
<br/><br/>
<div class="another-button">
<div>Search level 2 (your SVG)</div>
Search level 1
</div>

因为即使在DOMContentLoaded事件之后DOM也不可用。你唯一的选择是一个计时器，尽管这更像是一种解决问题的方法，而不是一种修复方法。最后一个示例尝试每秒更新一次文本。只有当它成功或达到最大尝试次数(限制(时，它才会停止更新。你当然可以增加等待时间(1000毫秒(或尝试次数(10(

const replaceTextInElement = (element, find, replace, searchInChildren = false) => {
if (!element.hasChildNodes()) return;

const regex = new RegExp(find, "g");

for(const childNode of element.childNodes) {
if(childNode.nodeType === Node.TEXT_NODE) {
childNode.textContent = childNode.textContent.replace(regex, replace);
} else if(searchInChildren) {
replaceTextInElement(childNode, find, replace, searchInChildren);
}
}
}
const replaceSearchText = (attempts, limit) => {
if(attempts > limit) return;

const searchBtn = document.querySelector(".search-button");
// Use the line below. I used the one above because i was to lazy to recreate all the html.
// const searchBtn = document.querySelector(".notion-topbar > div:nth-child(1) > div:nth-child(3)");

searchBtn
? replaceTextInElement(searchBtn, "Search", "Rechercher")
: setTimeout(() => replaceSearchText(attempts + 1, limit), 1000);
};
replaceSearchText(0, 10);

<div class="search-button">
<div>Search level 2 (your SVG)</div>
Search level 1
</div>