1

Как в html странице все слова разделенные пробелами, которые видны в окне браузера, заключить в тег span?

Например, было:

<div>
Слово1 
<p>Слово2</p>
<button>Слово3 Слово4</button>
</div>

Стало:

<div>
 <span>Слово1</span>
 <p><span>Слово2</span></p>
 <button><span>Слово3</span> <span>Слово4</span></button>
</div>
6
  • 2
    А зачем вам такое? 7 окт 2015 в 11:51
  • А можно при этом всю разметку снести и заново пересоздать?
    – Qwertiy
    7 окт 2015 в 16:09
  • А что делать со словами разделенными нескольким пробелам (переводами строк)? А что делать со знаками препинания? 7 окт 2015 в 18:15
  • Нужно бы более конкретное описание того, что у вас имеется и зачем вам необходимо из этого сделать то, что хотите. Может быть даже надо будет другую стратегию придумать. Или же как сказал Qwertiy - разметку поменять проще 7 окт 2015 в 18:53
  • 1
    Переводы строк и знаки препинание не учитываются, в любом случае в тексте после знаков препинания будут пробелы 8 окт 2015 в 8:11

1 ответ 1

3

$(document).ready(function() {
  $('body *').each(function() {
    element = $(this);
    node = element[0].childNodes;

    for (key in node) {
      if (node[key].nodeName == '#text') {
        if ($.trim(node[key].nodeValue).length == 0)
          continue;

        arrayText = $.trim(node[key].nodeValue).split(' ');
        returnText = '';

        for (index in arrayText) {
          if (arrayText[index] != '') {
            returnText += '<span>' + arrayText[index] + '</span> ';
          }
        }
        
        returnText = returnText.substr(0, returnText.length - 1);

        $(node[key]).wrap("<p />").parent().html(returnText).contents().unwrap();
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div>
  Слово1
  <p>Слово2</p>

  <button>Слово3 Слово4</button>
  Слово5 Слово6
</div>

Я немного усложнил задачу, так как текст можно вытащить проще если он лежит первым в элементе, а вот если между текстом есть еще элементы это уже сложнее:) Поэтому я добавил Слово5 и Слово6.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.