javascript - 使用 javascript 更改类中的单词

Question

我正在开发一个需要更改某些文字的网站。问题是 HTML 等不是我自己控制的。例如我无法编辑 html。不过，我可以在末尾附加额外的代码。

我需要更改的代码是“CHANGE ME”一词:

<div class="price">
 <a class="button" ng-click="commands.order.execute()" 
    ng-class="(!session.hidePrice &amp;&amp; project.project.requiredCalculation) ? 'refreshing' : ''">
     <span class="icon mdi mdi-cart" ng-class="::$root.icons.basket"></span>
     <currency value="project.project.total.total"
      class="price-total ng-isolate-scope ng-hide" 
      ng-show="!session.hidePrice &amp;&amp; project.project.pricing">
    <span class="currency ng-binding">
     <span ng-class="left" class="ng-binding currency-sign-left">£</span>
     1,089.02<span ng-class="right" class="ng-binding ng-hide">£</span>
    </span>
   </currency>

  <span ng-show="session.hidePrice || !project.project.pricing" class="ng-binding">
   CHANGE ME
  </span>
 </a>
</div>

我可以使用以下方法更改整个类(class):

    <script type="text/javascript">
var myClasses = document.getElementsByClassName("price");

for (var i = 0; i < myClasses.length; i++) {
  myClasses[i].innerHTML = "new content";
  }
</script>

问题是，这会删除所有编码并替换为“新内容”。我需要做的是保持内容相同，但用其他内容替换“改变我”的措辞。

附:理想情况下，我想说的是更改措辞“CHANGE ME”(如果它位于“price”类和 class="ng-binding”(或其他标识符，不知道是否可以使用“ng-show”)中)识别？？)

如果可以的话，请附上 fiddle

附:需要加载，因此没有按钮等(因此不需要用户输入)

Answer 1

如果无法更改 Angular 代码，可以使用选择器。

div.price > a.button span:nth-child(3)

document.querySelector('div.price > a.button span:nth-child(3)').innerHTML = 'Hello World!';

<div class="price">
  <a class="button" ng-click="commands.order.execute()" ng-class="(!session.hidePrice &amp;&amp; project.project.requiredCalculation) ? 'refreshing' : ''">
    <span class="icon mdi mdi-cart" ng-class="::$root.icons.basket"></span>
    <currency value="project.project.total.total" class="price-total ng-isolate-scope ng-hide" ng-show="!session.hidePrice &amp;&amp; project.project.pricing">
      <span class="currency ng-binding">
        <span ng-class="left" class="ng-binding currency-sign-left">£</span>
        1,089.02
        <span ng-class="right" class="ng-binding ng-hide">£</span>
      </span>
    </currency>
    <span ng-show="session.hidePrice || !project.project.pricing" class="ng-binding">
        CHANGE ME
    </span>
  </a>
</div>

您可以编写一个函数来循环所有匹配元素并替换部分或全部内容。

setContent('div.price > a.button > span', 'CHANGE ME', 'Hello World!', false);

function setContent(selector, pattern, text, replaceContent) {
  var els = document.querySelectorAll(selector);
  for (var i = 0; i < els.length; i++) {
    var el = els[i];
    if (replaceContent) {
      el.innerHTML = el.innerHTML.replace(pattern, text);
    } else {
      if ((pattern instanceof RegExp && el.innerHTML.match(pattern)) ||
          (typeof pattern === 'string' && el.innerHTML.trim() === pattern)) {
        el.innerHTML = text;
      }
    }
  }
}

<div class="price">
  <a class="button" ng-click="commands.order.execute()" ng-class="(!session.hidePrice &amp;&amp; project.project.requiredCalculation) ? 'refreshing' : ''">
    <span class="icon mdi mdi-cart" ng-class="::$root.icons.basket"></span>
    <currency value="project.project.total.total" class="price-total ng-isolate-scope ng-hide" ng-show="!session.hidePrice &amp;&amp; project.project.pricing">
      <span class="currency ng-binding">
        <span ng-class="left" class="ng-binding currency-sign-left">£</span>
        1,089.02
        <span ng-class="right" class="ng-binding ng-hide">£</span>
      </span>
    </currency>
    <span ng-show="session.hidePrice || !project.project.pricing" class="ng-binding">
        CHANGE ME
    </span>
  </a>
</div>