Remove tag if id matches but keep text

Question

I have a highlighter function that formats the matched words to an anchor with yellow bg-color and I need a function to remove the anchor elements for the next search.

The markup of a matched word, for the first one looks like this:

<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>

I need to remove the anchor but leave my text there. There are other anchors in my document that I dont want to interfere with. I need to do this in pure Javascript (no jQuery).

An addational requirement: Don't create new lines after tag removal, leave it as it was.

Thanks to enhzflep, the code until now:

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

Where num is the number of matched words.

For some reason this wont work, please help, I will accept the answer that solves this minor problem too.

Two answers had the method right but it is still buggy as it separates the resulting text with new lines. This makes the highlighter function to get the "my word" as separate temporary node values and won't be able to highlight a match for /my.word/.

what error appeared when doing that events? – Bryan Oct 03 '12 at 13:22 — Bryan, Oct 03 '12 at 13:22
@Stano you can js solution too over there – GajendraSinghParihar Oct 03 '12 at 13:50 — GajendraSinghParihar, Oct 03 '12 at 13:50

score 3 · Accepted Answer · edited Oct 03 '12 at 14:04

If I understand you correctly, you wish to turn this:

<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>

into this:

my text

If that's the case, then it's very easy.

As it stands, it looks like you're asking for an child of the element you showed (the element doesn't have any children, other than the text-node. I expect your script is hosed by line 2 - when it tries to get a non-existent child)

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

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

If you are using jQuery it will be simple DEMO

$('#searchword1').contents().unwrap();

But if you only want to use js for this there is solution by user113716 on the Link

DEMO

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

edited May 23 '17 at 12:22

Community

1
1

answered Oct 03 '12 at 13:38

GajendraSinghParihar

9,051
11
36
64

OMG: may be I am out of my mind today. you have all my apologies.Please see the corrected one – GajendraSinghParihar Oct 03 '12 at 14:08
@stano you too have a nice day – GajendraSinghParihar Oct 03 '12 at 14:13
Thanks, I couldn't get this from that code... Now it does the job but in the place of the removed tags the text will get separated by a line. This is unfortunate because the highlighter function for the next word will search again these previously highlighted words as separate nodes for some reason. And although using getElementsByClassName could be just fine, I try to keep the code compatible with IE8 too. – obeliksz Oct 03 '12 at 20:04

Remove tag if id matches but keep text

2 Answers2