CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1245284
user1245284

Reputation:

Replace a space within a SPAN tag with a BR tag

I need to replace the space between the 2 words with a BR tag. I've tried quite a few things, this one I thought would work, but the original script only does it to the first item. :( I need it to replace it on all the menu items.

It's for menu text on a CMS, so I won't know what the text is going to be. All I know is that it will always be no more than 2 words.

I can use either JS or jQuery.

Demo here: JS Bin Link

HTML: 

<span class="navtext">Lorem ipsum</span>

<br>

<span class="navtext">Lorem ipsum</span>

<br>

<span class="navtext">Lorem ipsum</span>

JavaScript: 

// Doesnt work
// var span = document.getElementsByTagName(".navtext");

// Only works for the first one
var span = document.querySelector(".navtext");

// Doesnt work
// var span = document.querySelectorAll("navtext");

function space() {
    var elem = document.createElement("br");
    // elem.className = "space";
    // elem.textContent = " ";
    return elem;
}

function replace(elem) {
    for(var i = 0; i < elem.childNodes.length; i++) {
        var node = elem.childNodes[i];
        if(node.nodeType === 1) {
            replace(node);
        } else {
            var current = node;
            var pos;
            while(~(pos = current.nodeValue.indexOf(" "))) {
                var next = current.splitText(pos + 1);
                current.nodeValue = current.nodeValue.slice(0, -1);
                current.parentNode.insertBefore(space(), next);
                current = next;
                i += 2;
            }
        }
    }
}

replace(span);

Upvotes: 1

Views: 2090

Answers (4)

user1245284
user1245284

Reputation:

Someone on twitter provided me with a fix, which was exactly like what Ashish answered.

var spans = document.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
  spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}

But that would quite work for me, but it did give me my answer! So thanks to Pete Williams

This is the code I went with:

var spans = document.querySelectorAll('.navtext');

for(var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}

Upvotes: 0

Ashish Kumar
Ashish Kumar

Reputation: 3039

I think, you dont want to use jQuery. Well, Here is quick solution:

var elms = document.querySelectorAll(".navtext");

for(var i=0; i<elms.length; i++){
    elms[i].innerHTML = elms[i].innerHTML.replace(/\s/gi, "<br />");
}

Here is the jsfiddle: http://jsfiddle.net/ashishanexpert/NrTtg/

Upvotes: 0

Bilal Akil
Bilal Akil

Reputation: 4755

If you install jQuery you can make it all more simple. Follow the installation instructions and then the code you'll need is something like:

jQuery(function($) {
    // for each navtext run the described function
    $(".navtext").each(function() {
        // "this" represents the navtext

        // replace all " " with "<br/>" from this's html
        var code = $(this).text();
        code = code.replace(" ", "<br/>");

        // update this's html with the replacement
        $(this).html(code);
    });
});

Upvotes: 0

Mehran Hatami
Mehran Hatami

Reputation: 12961

using jQuery you can do this:

$("span.navtext").each(function(){
    $(this).html($(this).text().replace(/ /g,"<br />"));
})

Upvotes: 1

Related Questions