在不直接访问 HTML 的情况下更改 HTML 文本
[英]Change HTML text without direct access to HTML
问题描述
I'm building a website in a website builder, but I would like to change the default message that appears when some required field in the website form is not filled.
我正在网站构建器中构建网站，但我想更改当网站表单中的某些必填字段未填写时出现的默认消息。 The form I am referring to is an element of the website builder itself.我所指的表单是网站构建器本身的一个元素。
Is there any way I can change HTML text without having direct access to it?有什么方法可以更改 HTML 文本而无需直接访问它？
I can add code to the <head> , but I don't believe it changes existing code.我可以将代码添加到<head> ，但我不相信它会更改现有代码。
The paragraph I would like to change is this:我想更改的段落是这样的：
<div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> Esse campo é obrigatório </p></div>
I was studying some possible improvised solutions using CSS, one of them would be to hide the text that appears in the HTML and put another one in the content of the CSS, but I know it's not the best way.我正在研究使用 CSS 的一些可能的即兴解决方案，其中之一是隐藏 HTML 中出现的文本并将另一个文本放入 CSS 的content中，但我知道这不是最好的方法。
I have the possibility to use CSS, HTML and JavaScript, the site accepts any of these languages in the <head> and in embedded code elements.我有可能使用 CSS、HTML 和 JavaScript，该站点在<head>和嵌入的代码元素中接受这些语言中的任何一种。
1 个解决方案
解决方案1
0 2022-07-20 22:00:44
First you add an eventListener to check if all the DOM elements have been loaded with window.addEventListener('load', ... Then you select the element you want to change. In this case I targeted the paragraph with a data-attribute in the hope that this is an unique element with that data-attribute: document.querySelector('p[data-v-3a756488=""]') . Then I use textContent on that element to replace the text:首先，您添加一个eventListener以检查是否所有 DOM 元素都已加载window.addEventListener('load', ...然后选择要更改的元素。在这种情况下，我将段落定位为具有数据属性的希望这是具有该数据属性的唯一元素： document.querySelector('p[data-v-3a756488=""]') 。然后我在该元素上使用textContent替换文本：
window.addEventListener('load', function() { let ele = document.querySelector('p[data-v-3a756488=""]'); let text = 'This is the replaced Text'; ele.textContent = text; })
<div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> Esse campo é obrigatório </p></div>
If you have more than just 1 element where you want to replace the text, you can also use an array and object with the same method.如果您想要替换文本的元素不止 1 个，您还可以使用具有相同方法的数组和对象。 You just create then an array of objects where you list the element you want to target and the text you want to replace with.然后，您只需创建一个对象数组，在其中列出要定位的元素和要替换的文本。 Then you can use a for -loop to apply all changes defined in the array of objects:然后，您可以使用for循环来应用对象数组中定义的所有更改：
window.addEventListener('load', function() { const replace = [ { element: 'p[data-v-3a756488=""]', text: 'replaced text of the first element' }, { element: 'p[data-v-3a756500=""]', text: 'replaced text of the second element' }, { element: 'p[data-v-6a756488=""]', text: 'replaced text of the third element' } ]; for (let i = 0; i < replace.length; i++) { let ele = document.querySelector(`${replace[i].element}`), text = replace[i].text; ele.textContent = text; } })
<div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> This is Element 1 </p></div> <div data-v-3a756500=""><p data-v-3a756500="" class="input__error-message z-body-small"> This is Element 2 </p></div> <div data-v-6a756488=""><p data-v-6a756488="" class="input__error-message z-body-small"> This is Element 3 </p></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.