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

Question

我正在使用 Wordpress，如果标签包含特定文本，我需要替换文本。我对 Javascript 不是很熟悉，所以我希望这里有人可以帮助我 :)

这是我的 html 结构:

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

我想要实现的是:

• 如果 span class="span1"= "30$"或者 span class="span1"="40$"
• 然后“姓名 1”需要替换为“姓名 2”
• 如果不是(= span 不是 30 或 40)，则脚本不得运行。
• “名称 2”与 span = 30 或 40 相同。

我希望我的解释足够清楚。我先尝试自己搜索，找到了一些函数，例如 getelement 和 innerHTML，但我没有找到如何将其与我需要的结果结合起来。

谢谢!

编辑:我想用特定的 href="http://www.example.com"定位标签 A

Answer 1

您可以使用 querySelector() , querySelectorAll() 和 closest() 然后做这样的事情

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>