Замените пробел в теге SPAN тегом BR

Question

Замените пробел в теге SPAN тегом BR

0

Мне нужно заменить пространство между двумя словами ярлыком BR. Я пробовал немало вещей, я думал, что это сработает, но исходный скрипт делает это только для первого элемента. :( Мне нужно его заменить на все пункты меню.

Это для текста меню на CMS, поэтому я не буду знать, какой текст будет. Все, что я знаю, это то, что всегда будет не более двух слов.

Я могу использовать JS или jQuery.

Демо здесь: 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);

Juan 04 янв. 2014, в 19:41

Источник

Теги:

javascript

jquery

html

css

4 ответа

1

используя jQuery, вы можете сделать это:

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

Mehran Hatami 04 янв. 2014, в 15:22

0

Кто-то на твиттере предоставил мне исправление, которое было точно так, как ответил Ашиш.

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

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

Но это сработало бы для меня, но это дало мне мой ответ! Так спасибо Питу Уильямсу

Это код, которым я пользовался:

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

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

Juan 04 янв. 2014, в 20:38

0

Если вы устанавливаете jQuery, вы можете сделать все более простым. Следуйте инструкциям по установке, а затем вам понадобится код:

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

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

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

Bilal Akil 04 янв. 2014, в 16:22

Ещё вопросы

Ashish Kumar · Accepted Answer · 2014-01-04T17-11-00.000Z

Я думаю, вы не хотите использовать jQuery. Ну, вот быстрое решение:

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

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

Вот jsfiddle: http://jsfiddle.net/ashishanexpert/NrTtg/