Javascript - 如果标记包含特定文本，则替换文本

Question

I'm using Wordpress and I need to replace a text if a tag contains a specific text. I'm not very familiar with Javascript so I hope someone here can help me :)

This is my html structure:

<tbody>
<tr class="tr1">
<td class="td1">
<a href="http://www.example.com">Name 1</a>
<strong class="quantity">× 1</strong>
</td>
<td class="td2">
<span class="span1">30$</span>
</td>
</tr>
</tbody>

What I'm trying to achieve is:

• If span class="span1" = "30$" or if span class="span1" ="40$"
• Then "Name 1" needs to be replaced by "Name 2"
• If not (= span is something else than 30 or 40), then the script must not run.
• The "Name 2" will be the same with a span = 30 or 40.

I hope my explanation is clear enough. I tried to search first by myself, I found some functions such as getelement and innerHTML but I didn't find how to combine it with the result I need.

Thank you!

EDIT: I would like to target the tag A with the specific href="http://www.example.com"

Answer 1

You can use querySelector() , querySelectorAll() and closest() and do something like this

 function changeTxt() { // get all spans var ele = document.querySelectorAll('.td2 .span1'); // iterate over the html element collection for (var i = 0; i < ele.length; i++) { // parse the text to get number // if symbol is in starting following will not work // var text = parseFloat(ele[i].innerHTML, 10); var text = parseFloat(ele[i].innerHTML.match(/\\d+(\\.\\d+)?/)[0], 10); // check the value is 30 or 40 if (text == 30 || text == 40) { // if true then get current tr and get anchor tag and update content var item = ele[i] // getting closest ancestor tr .closest('tr') // select a tag which have particular attribute value .querySelector('.tad1 a[href="http://www.example.com"]') // check item exists and update if (item) { item.innerHTML = 'Name 2'; // disabling click event (since disabled attribute will not work) //item.setAttribute('onClick', "return false;"); //or remove the href attribute item.removeAttribute('href'); // or // item.setAttribute('href','#'); } } } } changeTxt(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody> <tr class="tr1"> <td class="tad1"> <a href="http://www.example.com">Name 1</a> <strong class="quantity">× 1</strong> </td> <td class="td2"> <span class="span1">30.0$</span> </td> </tr> <tr class="tr1"> <td class="tad1"> <a href="http://www.example.com">Name 1</a> <strong class="quantity">× 1</strong> </td> <td class="td2"> <span class="span1">30.1$</span> </td> </tr> <tr class="tr1"> <td class="tad1"> <a href="http://www.example.com">Name 1</a> <strong class="quantity">× 1</strong> </td> <td class="td2"> <span class="span1">20$</span> </td> </tr> <tr class="tr1"> <td class="tad1"> <a href="http://www.example.com">Name 1</a> <strong class="quantity">× 1</strong> </td> <td class="td2"> <span class="span1">£30</span> </td> </tr> <tr class="tr1"> <td class="tad1"> <a href="#">Name 1</a> <strong class="quantity">× 1</strong> </td> <td class="td2"> <span class="span1">30$</span> </td> </tr> </tbody> </table>