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

我在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;            
}

函数getIframeContent（e）{ var searchTerm=e.data.textValue var query=new RegExp（“（\\b”+searchTerm+“\\b）”，“gim”）； var span=“$1” var findText=e.srcement.$html.context.body.innerHTML； var enew=findText.replace（//igm'）； e、 srcElement.$html.context.body.innerHTML=enew； var newe=enew.replace（查询，跨度）； e、 srcElement.$html.context.body.innerHTML=newe； }

---

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

函数getIframeContent（e）{ var searchTerm=e.data.textValue var query=new RegExp（“（\\b”+searchTerm+“\\b）”，“gim”）； var span=“$1” var findText=e.srcement.$html.context.body.innerHTML； //var enew=findText.replace（///igm'，）；//您可以改为按类搜索 var enew=document.querySelector（“.foo”）； enew.classList.remove（'foo'）； //太容易了！ e、 srcElement.$html.context.body.innerHTML=enew； var newe=enew.replace（查询，跨度）； e、 srcElement.$html.context.body.innerHTML=newe； }

---

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

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);            
}

var findText=null//用于保存原始内容
函数getIframeContent（e）{
var searchTerm=e.data.textValue
var query=new RegExp（“（\\b”+searchTerm+“\\b）”，“gim”）；
var span=“$1”
if（findText==null）{
findText=e.srcElement.$html.context.body.innerHTML；
}
e、 srcElement.$html.context.body.innerHTML=findText.replace（查询，span）；
}

问题是仅仅删除

样式属性是不够的，您需要删除整个
span
元素，否则DOM将被这些新的无关元素填满。一个非常简单的解决方案是在第一次搜索时存储IFrame的原始未接触的HTML，然后在每次后续搜索之前用它重置IFrame的内容

在本例中，我刚刚使用div创建了一个“假装”Iframe，但原理应该是相同的


form.addEventListener（'submit'，（事件）=>{
event.preventDefault（）；
const searchTerm=searchInput.value；
更新框架内容（搜索术语）；
});
让未触及的文本=“”；
函数updateFrameContent（searchTerm）{
如果（！未接触文本）{
untouchedText=iframe.innerHTML；
}
var query=new RegExp（“（\\b”+searchTerm+“\\b）”，“gim”）；
var span=“$1”
var newe=untoucedText.replace（查询，span）；
iframe.innerHTML=newe；
}
。假装iframe{
边框：实心2px浅灰色；
填充：10px；
}
标签{
边缘底部：10px；
显示：内联块；
}

搜索：
搜索

香草是一种从香草属兰花中提取的香料，主要从墨西哥品种平叶香草（V.planifolia）的荚果中提取。“香草”一词源于西班牙单词vaina（vaina本身的意思）的缩略词vainilla
鞘（或荚）被简单地翻译为“小荚”。前哥伦布时代的中美洲人种植香草兰花，阿兹特克人称之为tlīlxochitl。


授粉是使植物产生香草香料的果实所必需的。1837年，比利时植物学家查尔斯·弗朗索瓦·安托万·莫伦（Charles François Antoine Morren）发现了这一事实，并开创了一种为植物人工授粉的方法。方法
证明在财务上不可行，且未进行商业部署。1841年，爱德蒙·阿尔比乌斯（Edmond Albius）是一名奴隶，他生活在印度洋的法国Réunion岛上，12岁时发现这种植物可以人工授粉。允许人工授粉
植物的全球栽培。


目前有三种主要的香草在全球范围内种植，它们都源自一种原产于中美洲的香草，包括现代墨西哥的部分地区。它们是V.planifolia（syn.V.fragrans），生长在马达加斯加岛、Réunion岛和其他热带地区
印度洋沿岸地区；生长在南太平洋的大溪地；以及在西印度群岛、中美洲和南美洲发现的V.pompona。世界上大多数香草是V.planifolia品种，更常见的称为波旁香精
香草（原名Réunion，Île Bourbon）或马达加斯加香草，产于马达加斯加和印度洋西南部邻近岛屿以及印度尼西亚。马达加斯加和印度尼西亚的种植面积占三分之二
全世界香草的供应量。


香草是仅次于藏红花的第二贵香料，因为种植香草籽荚需要大量劳动。然而，香草广泛应用于商业和家庭烘焙、香水制造和芳香疗法。

但是我需要在这个js文件中添加这个类，所以我尝试了添加这个类，但是没有成功。如何在这里添加css类只有var link=e.srcelment.$html.context.createElement（'link'）；//设置link元素link.rel='stylesheet'的属性；link.type='text/scss'；link.href='styles.scss'；//获取HTML head元素以将//link元素附加到它的head.append（link）；e、 srcElement.$html.context.getElementsByClassName（'spanStylingTarget'）[5]；不起作用