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

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

问题

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

<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（我更喜欢这种语言）中的一种“ hack”，但是我不是这种解决方案的忠实拥护者，因为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;
}

帮助

我真的可以使用您的帮助，因为我在这一方面很努力。 感谢您的宝贵时间！

解决方法

如果您不想使用一个类，是否可以不为div分配一个ID，那么您可以直接将其命名为 document.getElementById（“ YourIdName”）。innerHTML =“随便”;

,

也许是这样吗？

document.querySelector（'div [role = button]'）

,

由于按钮内有多个节点。您应该检查每一项，如果它是文本节点，请替换内容。

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,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,"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,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,searchInChildren);
    }
  }
}

window.addEventListener("DOMContentLoaded",() => {
  const searchBtn = document.querySelector(".search-button");
  replaceTextInElement(searchBtn,"Rechercher");

  const anotherBtn = document.querySelector(".another-button");
  replaceTextInElement(anotherBtn,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>

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

const replaceTextInElement = (element,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,"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>