Question

我需要将一行jQuery代码转换为普通的旧JavaScript。有人可以指导我吗？

$('a').filter(function(index) {
    return $(this).text() === "Officer Title Equivalent*";
}).each(function() {
    $(this).html($(this).html().replace("*", "<span style='color:red'>*</span>"));
});

Answer 1

对于字面翻译......

抓住a元素。

var a = document.getElementsByTagName('a');

使用slice将节点列表强制转换为节点数组，然后使用数组方法filter和forEach

[].slice.call(a).filter(function (el) {
  return el.textContent === 'Officer Title Equivalent*';
}).forEach(function (el) {
  el.innerHTML = el.textContent.replace('*', '<span style="color:red">*</span>');
});

DEMO

另一个选择是gurvinder在他的问题中暗示的 - 不需要filter，只是一个条件：

[].slice.call(a).forEach(function (el) {
  var txt = el.textContent;
  if (txt === 'Officer Title Equivalent*') {
    el.innerHTML = txt.replace('*', '<span style="color:red">*</span>');
  }
});

DEMO

约瑟夫（评论）是对的 - 你也可以这样做：

[].forEach.call(document.getElementsByTagName('a'), function (el) {
  var txt = el.textContent;
  if (txt === 'Officer Title Equivalent*') {
    el.innerHTML = txt.replace('*', '<span style="color:red">*</span>');
  }
});

DEMO

Answer 2

它应该像

一样简单

var allAnchors = document.getElementsByTagName( "a" );
for ( var counter = 0; counter < allAnchors.length; counter++)
{
   var node = allAnchors.item( counter );
   if ( node.innerText === "Officer Title Equivalent*" )
   {
      node.innerHTML = node.innerHTML.replace("*", "<span style='color:red'>*</span>");
   }
}

应该适用于most browsers

jquery到Plain Javascript转换

2 个答案: