Можно сделать скрипт, где после каждого фит-слова идет абзац?

Мне действительно нужен сценарий, который облегчит мою работу, потому что я работаю со многими словами.

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

Допустим, у меня есть эти 11 слов. яблоко, стол, стул, дом, компьютер, бутылка, ручка, окно, цветочный корабль, коробка

Я хочу, чтобы мой скрипт расположил их так

apple table chair house computer

bottle pen window flower ship

box

надеюсь, вы получите это.

Если я вставлю 14 слов, это будет выглядеть так: яблоко, стол, стул, дом, компьютер, бутылка, ручка, окно, цветок, корабль, коробка, кнопка, мышь, книга

apple table chair house computer

bottle pen window flower ship

box button mouse book

тогда я поставлю 16

яблоко стол стул дом компьютер бутылка ручка окно цветок корабль коробка кнопка мышь книга календарь кабель

apple table chair house computer

bottle pen window flower ship

box button mouse book calendar

cable

Если это возможно, я был бы очень рад, если бы кто-то мог мне помочь. Должен сказать, что я не программист, но если кто-то даст мне этот скрипт, я точно знаю, как его использовать.


javascript html css paragraph
person Cristian Florin Cozmincă    schedule 09.10.2017    source источник
comment
хотя мы действительно разделяем любовь, вы можете попробовать добавить попытку решения. вы также можете посмотреть здесь: как спросить   -  person Nina Scholz    schedule 09.10.2017
comment
Я не знаю, что ты пытаешься сказать. Я действительно не знаю, возможно ли это вообще, но я представляю себе функцию вроде: Если слов = 5 в абзаце -›вставить новый абзац и так далее. Больше ничем не могу помочь :(   -  person Cristian Florin Cozmincă    schedule 09.10.2017
comment
Кроме того, я искал в этой области, ничего, что мне помогло.   -  person Cristian Florin Cozmincă    schedule 09.10.2017
comment
несколько вопросов: откуда берутся слова? находятся ли они на html-странице со специальным тегом вокруг или в текстовом поле, где вы хотите их отформатировать, или просто массив, который должен быть отображен в html для вывода?   -  person Nina Scholz    schedule 09.10.2017
comment
Привет, добро пожаловать в SO. Если вы написали для этого код, который не можете заставить работать, то вы попали по адресу. Просто отредактируйте свой вопрос и добавьте в него соответствующие части кода. Вам нужно показать свои собственные усилия, потому что Stack Overflow — это не сервис, где можно написать мой код для меня. См. Как спросить.   -  person Peter B    schedule 09.10.2017
comment
У меня они такие: @ clintbatac_art @ luxurianiya @ raulwhately @ evanyiri @ ix_nattan @ juan.espz @ jqwerhj @ noorasgirl @ yangduoduo616 @ mintgreendemon и я хочу, чтобы они были размещены в абзаце. И абзац останавливаться на каждом пятом слове (без пробела между @ и словом)   -  person Cristian Florin Cozmincă    schedule 09.10.2017

Ответы (5)


arrow_upward
3
arrow_downward

Используя JavaScript, вы можете сопоставить такое слово, как \w+, которое будет соответствовать любой последовательности последовательных букв, цифр или знаков подчеркивания. Кроме того, \s* будет соответствовать одному или нескольким последовательным пробелам. Итак, \w+\s* соответствует слову, а \w+\s*{5} соответствует 5 словам. Мы фиксируем эту строку из 5 слов, используя $1, и добавляем новую строку \n в конце.

var string = "apple table chair house computer bottle pen window flower ship box button mouse book calendar cable";

var newString = string.replace(/((\w+\s*){5})/g, "$1\n");

console.log(newString);

person Ahmad    schedule 09.10.2017
comment
это самое!!!! спасибоуу!! Я искал в Интернете вдоль и поперек, слева и справа, и я не мог найти это. - person Cristian Florin Cozmincă; 09.10.2017

arrow_upward
1
arrow_downward

если вы действительно хотите вставить теги p вместо новой строки, вы можете попробовать это:

var container = document.getElementById('container');
//get the text content
var text = container.innerText || container.textContent;
//split the text by spaces, any number of spaces
var words = text.split(/\s+/);
//empty the container
container.innerHTML = "";
words.forEach(function(word,index){
	if(index%5 == 0){ //if current index is a multiple of 5
  	p = document.createElement("p");
    container.append(p);
  }
  p.innerHTML += word+" "; 
});
<div id="container">
apple table chair house computer bottle pen window flower ship box button mouse book calendar cable
</div>

person Victor Radu    schedule 09.10.2017

arrow_upward
1
arrow_downward

Есть более сложные решения, такие как регулярное выражение или функции, но попробуйте это простое.

var texts = 'apple table chair house computer bottle pen window flower ship box';
var myarray = texts.split(" ");
var words = texts.split(' ').length;
var colwords=[];
var count_to_5=0;
for (var i = 0; i < words; i++) {
  colwords.push(myarray[i]);
  if (count_to_5==5){
    var ll = colwords.toString();
    var re = new RegExp(',', 'g');
    $(".rr").append("<p>" + ll.replace(re,' ') + "</p>");
    count_to_5=0;
    colwords=[];
  } 
  count_to_5++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="rr"></div>

person AlexCode    schedule 09.10.2017
comment
вы никогда не дойдете до конца цикла. - person Nina Scholz; 09.10.2017
comment
@NinaScholz Юп - person Tomm; 09.10.2017
comment
Исправлено, проверьте сейчас. - person AlexCode; 09.10.2017

arrow_upward
0
arrow_downward

Вот решение для обрезки строки, как вам нравится

<!DOCTYPE html>
     <html>
       <head>
          <title>Page Title</title>
              </head>
        <body>
        <div id="stuff">a reallly really really long titleasdfasd fasdfasdfasdfasdfasdfadsf</div> 
        <script>
              function cutToString(id, Lenth){    
                var text = document.getElementById(id).innerHTML;
                var charsToCutTo = Lenth;
                  if(text.length>charsToCutTo){
                  var strShort = "";
                      for(i = 0; i < charsToCutTo; i++){
                         strShort += text[i];
                  }
                  document.getElementById(id).title = "text";
                  document.getElementById(id).innerHTML = strShort + "...";
               }            
         };

        cutToString('stuff', 40); 
    </script>

   </body>
 </html>

Где cutToSting - это функция для передачи вашего текста с использованием «ID» и длины строки.

person Md.Shahjalal    schedule 09.10.2017

arrow_upward
0
arrow_downward

Это должно вставить разрыв строки в ближайший пробел maxChar

Посмотрите этот ресурс, чтобы получить некоторое представление о том, как вы хотите, чтобы ваша функция работала. Я бы рекомендовал установить счетчик пробелов на 0, запустить цикл и проверить наличие символа пробела в строке. Всякий раз, когда появляется 5-й пробел (проверьте мод 5), добавьте символ '\n' к строке в этой позиции и продолжайте.

Очень хотелось бы порекомендовать также более тщательно искать, прежде чем задавать вопрос. Надеюсь это поможет !

person BanelingRush    schedule 09.10.2017
comment
это звучит проще, чем то, что я хочу, но действительно ли это может помочь мне, когда мне нужно копировать и вставлять тысячи слов? - person Cristian Florin Cozmincă; 09.10.2017
comment
да, размер не должен иметь значения, только может повлиять на то, как он отображается в «DOM» (объектная модель документа), если вы правильно его стилизуете. В любом случае, поскольку все решения заставят вас пройти всю строку, в любом случае ваша временная сложность останется прежней. - person BanelingRush; 09.10.2017