html - How to Invoke a Javascript function on the content of a div?

Question

I am developing a WordPress page, where it's required to call a javascript function (given below) to transform the text to title case or sentence case. I found some scripts from previous posts, which I would like to use. however, I do not know how to call it inside a DIV or a paragraph.

this is the script that I would like to use. any help to improve this script is welcome.

PS: I do not want to use the CSS method to transform the text.

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^W_]+[^s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At',
    'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'
  ];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\s' + lowers[i] + '\s', 'g'),
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\b' + uppers[i] + '\b', 'g'),
      uppers[i].toUpperCase());

  return str;
}

Answer 1

To run the function you need to retrieve all the target elements, in the example below I used div elements but a class or any other valid selector would work, and from there you need to invoke the toTitleCase() string prototype on the text content of each element. It could look something like this:

document.querySelectorAll('div').forEach(el => el.textContent = el.textContent.toTitleCase());

Here's a full working example:

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^W_]+[^s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At',
    'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'
  ];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\s' + lowers[i] + '\s', 'g'),
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\b' + uppers[i] + '\b', 'g'),
      uppers[i].toUpperCase());

  return str;
}

document.querySelectorAll('.title').forEach(el => el.textContent = el.textContent.toTitleCase());

<h3 class="title">This is an example of title case</h3>
<p>This is paragraph text and will not be changed.</p>