Change HTML text without direct access to HTML-CodePudding

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?

I can add code to the <head>, but I don't believe it changes existing code.

The paragraph I would like to change is this:

<div data-v-3a756488=""><p data-v-3a756488="" > 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.

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.

CodePudding user response：

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:

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="" > 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. 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:

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="" > This is Element 1 </p></div>

<div data-v-3a756500=""><p data-v-3a756500="" > This is Element 2 </p></div>

<div data-v-6a756488=""><p data-v-6a756488="" > This is Element 3 </p></div>