Concatenate strings after removing span in Javascript?

Question

I have a function that removes spans that I have previously inserted in my xhtml.

My problem is, when it removes the span it doesn't join the string it contains with the strings around it.

So for example, I start with:

<p class="s6">
<span class="myClass">The</span>
" quick brown fox jumps over the lazy dog." 
</p>

And then when I remove the span I get

<p class="s6">
"The"
" quick brown fox jumps over the lazy dog."
</p>

Whereas I want this:

<p class="s6">
"The quick brown fox jumps over the lazy dog."
</p>

the code I am using is this:

spansToRemove[i].parentNode.replaceChild(document.createTextNode(spansToRemove[i].innerHTML), spansToRemove[i]);

I have noticed that if I save and reopen the xhtml file, it turns into the version I want, but this seems quite hacky. And since I'm not normally a javascript programmer, I don't know if this is normal behaviour, or what the appropriate way to deal with it is?

That "createTextNode" in my code looks suspicious, but I can't find anythings else useful to replace it with.

The reason I don't like how it currently does it, is that it effects my ability to be able to select text freely.

This is happening in a UIWebview in an iOS app. Javascript not JQuery.

thanks

Your p element includes a textnode with a newline (after the span) that must also be removed. — kennebec, Jul 17 '14 at 12:45
spansToRemove is an array that I have pushed the appropriate span elements onto (actually at the moment it is only ever has a length of 1, but it may have more in the future) — narco, Jul 17 '14 at 14:44
I was just wondering if you had a live collection. `getElementsByTagName` as well as `getElementsByClassName` method returns an live [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), unlike `querySelectorAll` which returns a static collection. — Teemu, Jul 17 '14 at 15:00
I get all spans using document.getElementsByClassName("myClass") and then add ones that are in a certain range (using selection.getRangeAt(0)) to spansToRemove — narco, Jul 17 '14 at 21:09

score 0 · Answer 1 · answered Jul 17 '14 at 13:40

0

You may try this regular expression

/<span[^\>]+>|<\/?span>|\r?\n|\r|\s{2,}|\t{2,}/gi

Simple usage:

// JavaScript
window.onload = function(){
    document.getElementById("button").onclick = function(){
        var html = document.body.innerHTML;
        html = html.replace(/<span[^\>]+>|<\/?span>|\r?\n|\r|\s{2,}|\t{2,}/gi, '');
        document.body.innerHTML = html;
    };
};

<!-- HTML -->
<body>
    <p class="s6">
        <span class="myClass">The</span>
        quick brown fox jumps over the lazy dog.
    </p>
    <p class="s6">
        <span class="myClass">The</span>
        quick brown fox jumps over the lazy <span style="font-weight:bold;">dog</span>.
    </p>
    <input type="button" name="button" id="button" value="Remove SPANs">
</body>

answered Jul 17 '14 at 13:40

hex494D49

9,109
3
38
47

Hmm.. you're one of those who haven't seen [this](http://stackoverflow.com/a/1732454/1169519) yet? – Teemu Jul 17 '14 at 13:49
@Teemu I swear I did ;) I just love Regex and I used them a lot when a parser would fail. Actually I know all the things written in that post but just... love the mystery of regex :) – hex494D49 Jul 17 '14 at 14:02
Well, unfortenately comments are locked in that post, yours would be new kerosine to the flames ; ). – Teemu Jul 17 '14 at 14:06

Concatenate strings after removing span in Javascript?

1 Answers1