Javascript - Replace text if tag contains specific text

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"

Pranav C Balan · Accepted Answer · 2016-04-20 13:48:07Z

3

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>

edited Apr 20, 2016 at 13:48

answered Apr 20, 2016 at 11:09

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

20 Comments

Marcos Pérez Gude Over a year ago

Problem. Query selector returns 1 element. What if the table have two or more rows? You need to write with querySelectorAll()

Pranav C Balan Over a year ago

You need to use querySelectorAll and iterate over them

Marcos Pérez Gude Over a year ago

That's what I've said.

Ludo65 Over a year ago

Thank you Pranav. Can I specify in the querySelector('.tad1 a') that I want to select only the .tad1 a with href="example.com" please?

Ken Bellows Over a year ago

attributes can be specified in CSS selectors using the square bracket syntax: [attr=value]. So you'd want to make it something like: ....querySelector('.tad1 a[href=example.com]')

|

Collectives™ on Stack Overflow

Javascript - Replace text if tag contains specific text

1 Answer 1

20 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

20 Comments

Your Answer

Sign up or log in

Post as a guest

Related