查找特定字符串并将其大写答案

【问题标题】：Find specific string and capitalize it查找特定字符串并将其大写
【发布时间】：2020-09-08 18:09:00
【问题描述】：

在我的条目标题中，我有条目标题（h1 标签），在其中我有 <sup> 标签。这个标题来自 WordPress 并且上标标签正在工作，但我想在每个标题中找到每个“tm”并使用 js/jquery 将其大写。这是我的html：

<div class="entry-header">
 <h1 class="entry-title">Just Testing Something<sup>TM</sup></h1>                        
</div>

还有我的 js：

$(document).ready(function(){

    $('sup:contains("tm")')
        $(this).css({
        'cssText': 'text-transform: uppercase !important'
        });
});

但这不起作用。有人知道为什么吗？

【问题讨论】：

去掉$(this)
..... $('sup:contains("tm")').css('text-transform', 'uppercase');
语法错误。如果从代码中删除空格，错误会更加明显。 $('sup:contains("tm")')$(this).css({

标签： javascript html jquery wordpress

【解决方案1】：

@gabriel-lupu 回答时，我正在研究“纯 JS”解决方案！ :-D

好吧，我在这里发帖以防万一：

<!DOCTYPE html>
<html>
    <head>
        <title>My Title</title>
        <style type="text/css">
            .myStyle {
                text-transform: uppercase;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="entry-header">
            <h1 class="entry-title">Just Testing Something<sup>TM1</sup></h1>                        
        </div>
        <div class="entry-header">
            <h1 class="entry-title">Just Testing Something<sup>Middle</sup></h1>                        
        </div>
        <div class="entry-header">
            <h1 class="entry-title">Just Testing Something<sup>TM2</sup></h1>                        
        </div>
        <script type="text/javascript">
            function setClassOfElemWithText(elem, text, myClass) {
                var nodes = document.querySelectorAll(elem);
                for (var i = 0; i < nodes.length; i++) {
                    var node = nodes[i];
                    if (node.textContent.indexOf(text) !== -1) {
                        node.setAttribute('class', myClass);
                    }
                }
            }

            setClassOfElemWithText('sup', 'TM', 'myStyle');
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

刚刚看了你的问题，这对我有用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Change tm</title>
  </head>
  <body>
    <div class="entry-header">
      <h1 class="entry-title">
        <sup>copy</sup>Just Testing Something<sup>tm</sup>
      </h1>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("sup:contains('tm')").css("text-transform", "uppercase");
      });
    </script>
  </body>
</html>

【讨论】：