Javascript 如果id匹配,则删除标记,但保留文本
我有一个高亮功能,将匹配的单词格式化为黄色bg颜色的锚,我需要一个删除锚元素的功能,以便下次搜索 第一个匹配单词的标记如下所示:Javascript 如果id匹配,则删除标记,但保留文本,javascript,dom,Javascript,Dom,我有一个高亮功能,将匹配的单词格式化为黄色bg颜色的锚,我需要一个删除锚元素的功能,以便下次搜索 第一个匹配单词的标记如下所示: <a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a> 我的文本 我需要删除锚,但我的文字留在那里。我的文档中还有其他我不想干预的锚。我需要用纯Javas
<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>
我的文本
我需要删除锚,但我的文字留在那里。我的文档中还有其他我不想干预的锚。我需要用纯Javascript(无jQuery)来完成这项工作
- 一个附加要求:删除标记后不要创建新行,保持原样
for (z=0;z<szam;z++){
var removal = parent.frames['pagina'].document.getElementById("searchword"+z);
var highlightedText = removal.innerHTML.toLowerCase;
removeh(removal,highlightedText,doc);
}
function removeh(node,high,doc) {
doc = typeof(doc) != 'undefined' ? doc : document;
if (node.hasChildNodes) {
var hi_cn;
for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
removeh(node.childNodes[hi_cn],high,doc);
}
}
//1. Get element containing text
if (node.nodeType == 3) {
tempnode = node.nodeValue.toLowerCase();
if (tempnode.indexOf(high) != -1) {
nv = node.nodeValue;
nv = node.nodeValue;
ni = tempnode.indexOf(high);
//2. Get the text it contains
before = doc.createTextNode(nv.substr(0,ni));
dochighVal = nv.substr(ni,high.length);
after = doc.createTextNode(nv.substr(ni+high.length));
//3. Get the highlighted element's parent
var daddy = node.parentNode;
//4. Create a text node:
var newNode = document.createTextNode(dochighVal);
//5. Insert it into the document before the link
daddy.insertBefore(before, node);
daddy.insertBefore(newNode, node);
daddy.insertBefore(after, node);
//6. Remove the link element
daddy.removeChild(node);
}
}
}
for(z=0;z如果我理解正确,您希望将此:
<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>
如果是这样,那就很容易了
从目前的情况看,您似乎在请求显示的元素的子元素(该元素除了文本节点之外没有任何子元素。我希望您的脚本在第2行中被套住-当它试图获取一个不存在的子元素时)
如果我理解正确,您希望:
<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>
如果是这样,那就很容易了
从目前的情况看,您似乎在请求显示的元素的子元素(该元素除了文本节点之外没有任何子元素。我希望您的脚本在第2行中被套住-当它试图获取一个不存在的子元素时)
如果您使用的是jQuery,它将非常简单
但是如果你只想用js来解决这个问题,有一个解决方案
如果您使用的是jQuery,它将非常简单
但是如果你只想用js来解决这个问题,有一个解决方案
在做那些活动时出现了什么错误?@Stano你也可以在那里看到js解决方案在做那些活动时出现了什么错误?@Stano你也可以在那里看到js解决方案OMG:可能是我今天疯了。我向你道歉。请看更正的答案one@stano你今天也过得很愉快谢谢,我不能从代码中得到这个…现在它做到了作业但是在移除标记的位置,文本将被一行分隔。这是不幸的,因为下一个单词的高亮显示函数出于某种原因将再次搜索这些先前高亮显示的单词作为单独的节点。尽管使用getElementsByClassName可能很好,但我尝试保持代码与IE8 t兼容我的天哪:可能是我今天疯了。我向你道歉。请看更正的one@stano你也过得很愉快谢谢,我无法从代码中得到这个…现在它完成了工作,但在移除标记的地方,文本将被一行分隔。这很不幸,因为下一个单词的高亮功能将是searc由于某种原因,这些先前突出显示的单词再次作为单独的节点。尽管使用GetElementsByCassName可以很好,但我也尝试保持代码与IE8兼容。
//1. Get element containing text
var element = document.getElementById('searchWord1');
//2. Get the text it contains
var highlightedText = element.innerHTML;
//3. Get the highlighted element's parent
var parent = element.parentNode;
//4. Create a text node:
var newNode = document.createTextNode(highlightedText);
//5. Insert it into the document before the link
parent.insertBefore(newNode, element);
//6. Remove the link element
parent.removeChild(element);
$('#searchword1').contents().unwrap();
var b= document.getElementsByClassName('searchword');
while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}