如何使用 Vanilla JavaScript 从 span 元素中删除样式属性

Question

我在 iframe 中有一个网站，我在该页面中突出显示了搜索词。 问题是当我突出显示新搜索词时，旧搜索词仍然突出显示。
我想要做的是替换这个：

<span style='background-color:yellow;color:black;'>job</span>

有了这个：

<span>job</span>

，或者只是从 span 标签中删除 style 属性。

这是我的 Javascript 函数：

function getIframeContent(e) {
  var searchTerm = e.data.textValue
  var query = new RegExp("(\\b" + searchTerm + "\\b)", "gim");
  var span = "<span style='background-color:yellow;color:black;'>$1</span>"
  var findText = e.srcElement.$html.context.body.innerHTML;
  var enew = findText.replace( /<span style='background-color:yellow;color:black;'>./igm,'<span>');

  e.srcElement.$html.context.body.innerHTML = enew;
  var newe = enew.replace(query, span);
  e.srcElement.$html.context.body.innerHTML = newe;            
}

Answer 1

如果您创建一个类而不是使用内联样式，您可以使用 querySelector 并避免所有这些头痛

function getIframeContent(e) {
  var searchTerm = e.data.textValue
  var query = new RegExp("(\\b" + searchTerm + "\\b)", "gim");
  var span = "<span class='foo'>$1</span>"
  var findText = e.srcElement.$html.context.body.innerHTML;
  //        var enew = findText.replace( /<span style='background color:yellow;color:black;'>./igm,'<span>'); // you can search by class instead
  var enew = document.querySelector(".foo");
  enew.classList.remove('foo');
  // so much easier!

  e.srcElement.$html.context.body.innerHTML = enew;
  var newe = enew.replace(query, span);
  e.srcElement.$html.context.body.innerHTML = newe;
}

Answer 2

您可以 - 而不是将突出显示的文本更改回原来的内容 - 还可以在编辑框架之前保存框架的原始内容并使用保存的原始内容来查找您的条款。

var findText = null; //for saving the original content
function getIframeContent(e){
    var searchTerm = e.data.textValue
    var query = new RegExp("(\\b" + searchTerm + "\\b)", "gim");
    var span = "<span style='background-color:yellow;color:black;'>$1</span>"
    if(findText === null) {
        findText = e.srcElement.$html.context.body.innerHTML;
    }
    e.srcElement.$html.context.body.innerHTML = findText.replace(query, span);            
}

Answer 3

问题是仅仅移除style属性是不够的，你需要移除整个span元素，否则 DOM 会被这些新的无关元素填满。 一个非常简单的解决方案是在第一次搜索时存储 IFrame 的原始未修改 HTML，然后在每次后续搜索之前使用它重置 IFrame 的内容。

在这个例子中，我刚刚使用 div 创建了一个“假装”Iframe，但原理应该是一样的。

 form.addEventListener('submit', (event) => { event.preventDefault(); const searchTerm = searchInput.value; updateIframeContent(searchTerm); }); let untouchedText = ''; function updateIframeContent(searchTerm) { if(!untouchedText) { untouchedText = iframe.innerHTML; } var query = new RegExp("(\\\\b" + searchTerm + "\\\\b)", "gim"); var span = "<span style='background-color:yellow;color:black;'>$1</span>" var newe = untouchedText.replace(query, span); iframe.innerHTML = newe; }

 .pretend-iframe { border: solid 2px dimgrey; padding: 10px; } label { margin-bottom: 10px; display: inline-block; }

 <form id="form"> <label>Search:<input name="search-input" id="searchInput"/></label> <button id="search-button">search</button> </form> <div class="pretend-iframe" id="iframe"> <p> Vanilla is a spice derived from orchids of the genus Vanilla, primarily obtained from pods of the Mexican species, flat-leaved vanilla (V. planifolia). The word vanilla, derived from vainilla, the diminutive of the Spanish word vaina (vaina itself meaning a sheath or a pod), is translated simply as "little pod". Pre-Columbian Mesoamerican people cultivated the vine of the vanilla orchid, called tlīlxochitl by the Aztecs. </p> <p> Pollination is required to make the plants produce the fruit from which the vanilla spice is obtained. In 1837, Belgian botanist Charles François Antoine Morren discovered this fact and pioneered a method of artificially pollinating the plant. The method proved financially unworkable and was not deployed commercially. In 1841, Edmond Albius, a slave who lived on the French island of Réunion in the Indian Ocean, discovered at the age of 12 that the plant could be hand-pollinated. Hand-pollination allowed global cultivation of the plant. </p> <p> Three major species of vanilla currently are grown globally, all of which derive from a species originally found in Mesoamerica, including parts of modern-day Mexico. They are V. planifolia (syn. V. fragrans), grown on Madagascar, Réunion, and other tropical areas along the Indian Ocean; V. tahitensis, grown in the South Pacific; and V. pompona, found in the West Indies, Central America, and South America. The majority of the world's vanilla is the V. planifolia species, more commonly known as Bourbon vanilla (after the former name of Réunion, Île Bourbon) or Madagascar vanilla, which is produced in Madagascar and neighboring islands in the southwestern Indian Ocean, and in Indonesia. Madagascar's and Indonesia's cultivations produce two-thirds of the world's supply of vanilla. </p> <p> Vanilla is the second-most expensive spice after saffron because growing the vanilla seed pods is labor-intensive. Nevertheless, vanilla is widely used in both commercial and domestic baking, perfume manufacture, and aromatherapy. </p> </div>