如何在 div 的内容上调用 Javascript 函数？

Question

我正在开发一个 WordPress 页面，需要调用 javascript 函数（如下所示）将文本转换为标题大小写或句子大小写。我从以前的帖子中找到了一些我想使用的脚本。但是，我不知道如何在 DIV 或段落中调用它。

这是我想使用的脚本。欢迎任何帮助改进此脚本。

PS：我不想使用 CSS 方法来转换文本。

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

要运行该函数，您需要检索所有目标元素，在下面的示例中，我使用了div 元素，但一个类或任何其他有效的选择器都可以工作，并且您需要从那里调用toTitleCase() 字符串原型关于每个元素的文本内容。它可能看起来像这样：

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

这是一个完整的工作示例：

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>