使用javascript更改類中的單詞

Question

我正在使用需要更改某些單詞的網站。問題是HTML等不是我自己控制的。例如我無法編輯html。但是，我可以在最後附加額外的代碼。

我需要改變的代碼是使用的措辭「改變自己」中：

<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> 

我可以用改變整個類：

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

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

問題是，這將刪除所有的編碼和取代「新內容」。我需要做的是保持內容相同，但用別的替換措辭「改變我」。

p.s.理想情況下，我想說的是，如果在類「價格」和類=「ng-binding」（或其他標識符，不知道是否可以使用「ng-show」）中更改措辭「CHANGE ME」識別??）

如果可能的話，請包括小提琴

PS需要被爲onload所以沒有按鈕等（因此沒有用戶輸入需要）

Answer 1

如果你可以使用createTreeWalker遍歷這些節點不能改變Ang ular代碼，您可以使用選擇器。

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>

Answer 2

香草可能的解決方案：

要更換可以使用String.prototype.replace()的字符串。

如果您需要在innerHTML中附加一些文本，您可以使用+-（JavaScript分配運算符），它將在innerHTML中可見的當前內容中附加新內容;

myClasses[i].innerHTML += "new content"; 

通用示例使用賦值運算符：

let result = document.getElementById('result'); 
 
document.getElementById('button').addEventListener('click', event => { 
 
    result.innerHTML += 'new content</br>'; 
 
});

<button id="button">Click me!</button> 
 
<div id="result">Hello some content here!</br></div>

Answer 3

如果目的是隻能看文字內容，那麼你應該在遍歷所有文本節點和應用測試/替換這些中的每一個。爲什麼不使用angularjs與ng-bind

function textNodesUnder(el){ 
 
    var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); 
 
    while(n=walk.nextNode()) a.push(n); 
 
    return a; 
 
} 
 

 
textNodesUnder(document.querySelector('.price')).forEach(function(node) { 
 
    node.data = node.data.replace('CHANGE ME', 'new Content'); 
 
});

<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>

Answer 4

：

<span ng-show="session.hidePrice || !project.project.pricing" 
    ng-bind="(session.hidePrice || !project.project.pricing) ? 'CHANGE ME' : 'new Content'" 
    class="ng-binding">  
</span> 

使用指令：

app.directive('price', function(){ 
    return { 
    restrict:'C', 
    link:function(scope, el, attrs){ 
     angular.element(el).find('span').last().html('new Content'); 
    } 
    }; 
})