javascriptを使用してクラス内の単語を変更する

Question

特定の単語を変更する必要があるサイトで作業しています。問題はHTMLなどが自分で制御されていないことです。例えば私はHTMLを編集することはできません。しかし、私は最後に余分なコードを追加することができます。

私は変更する必要があるコードは、文言が「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> 

私が使用してクラス全体を変更することができます。

<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"という言葉を他のものと置き換えてください。

p.s.理想的には、私はそれがクラス "price"とclass = "ng-binding"（または別の識別子、 "ng-show"を使用できるかどうかわからない場合）という表現を "CHANGE ME"可能であれば）??

を識別するために、フィドル

PSを含めてください

あなたがString.prototype.replace()を使用することができます文字列を置換するには、次のようにノーボタンなど（これはユーザーの入力は必要ありません）

Answer 1

を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

バニラ可能な解決策をONLOADする必要があります。

代わりにinnerHTMLにテキストを追加する必要がある場合は、innerHTMLに表示される現在のコンテンツに新しいコンテンツを追加する+-（JavaScript Assignment Operator）を使用できます。代入演算子使用

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

を目的のみテキストの内容を見ている場合、あなたはすべてのテキストノードを反復してテストを適用すべきである/に置き換えますそれらのそれぞれ。あなたは、このようなノードを反復するcreateTreeWalkerを使用することができます。

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

をng-bindでangularjsを使用していない理由：

<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'); 
    } 
    }; 
})