Как поставить или исключить пробел?

224
28 мая 2018, 12:40

Вопрос по сути продолжение этого вопроса

Стал дорабатывать, сделал разбиение внутри элемента.

Каждое слово оборачиваю через функцию в блок внутрь которого выводится панель .

Проблема в том выводится пустое сообщение т.е этот блок

Блок генерится после OurString=OurString.split(". ");

Здесь мешает после точки пробел , если его убрать то появляется блок без комментария т.е пустой но с панелью

если оставить пробел то user должен после точки делать пробел что не айс

как можно избежать самой точки и пробела после ?

пример под спойлером :

var OurString = $(".wrapper").html(); 
var NewOurString = ""; 
OurString = OurString.split(". "); 
for (i = 0; i < OurString.length; i++) { 
  NewOurString = NewOurString + "<div class='item'>" + OurString[i] + "</div>"; 
} 
$(".wrapper").html(NewOurString); 
 
 
 
 
var panel = '<div class="panel"><div class="elem">message</div><div class="edit">edit</div><div class="delete">delete</div></div>'; 
 
var outer = '<label for="outer"></label><div id="outer" class="outer" style="z-index:1000;"><form> <input type="text" placeholder="write a message"><div class="recent"><p><a href="">foto</a><a href="">video</a></p><p><span>300 characters</span></p></div> <button>send</button> <span class="agree">By clicking on the button you agree to the <a href="#">license agreement</a></span></form></div>'; 
 
$(".item").append(panel); 
 
$(".elem").on("click", function() { 
  $(this).attr("tabindex", -1); 
  $(this).append(outer); 
})
* { 
  list-style: none; 
  margin: 0; 
} 
 
.wrapper { 
  width: 90%; 
  margin: 40px auto; 
} 
 
.elem { 
  color: orange; 
  display: inline-block; 
  text-align: center; 
  position: relative; 
  outline: none; 
  cursor: pointer; 
} 
 
.outer { 
  position: absolute; 
  top: calc(100% + 30px); 
  width: 300px; 
  left: 0; 
  padding: 20px; 
  box-shadow: 0 0 10px rgba(0, 0, 0, .3); 
  text-align: left; 
  display: none; 
  z-index: 1000; 
  background: #fff; 
} 
 
.elem:focus .outer, 
.outer:hover { 
  display: block; 
} 
 
input[type="text"] { 
  display: block; 
  width: 90%; 
  padding: 3px 0; 
} 
 
.recent { 
  display: flex; 
  justify-content: space-between; 
  font-size: 10px; 
  padding: 6px 0; 
} 
 
.recent a { 
  margin: 0 10px; 
  text-align: left; 
} 
 
span.agree { 
  font-size: 8px; 
} 
 
.elem, 
.edit, 
.delete { 
  color: orange; 
  font-size: 12px; 
  text-align: left; 
  margin-left: 5px; 
} 
 
.item { 
  display: block; 
  background: #fbfbfb; 
  padding: 20px 10px 4px 10px; 
  margin: 10px 0; 
  position: relative; 
} 
 
.panel { 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
  text-align: center; 
  height: 14px; 
  z-index: 100; 
  width: 250px; 
  margin: 10px 0; 
} 
 
::placeholder { 
  font-size: 10px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
  wer you. coll my center. windows coll tering. lorem ipsum. 
</div>

предложения выводятся в тег .wrapper

https://codepen.io/topicstarter/pen/KRbopG?editors=1100

Answer 1

let str = ` 
  Sentence one! Sentence two... 
  Sentence 3. 
`; 
 
let parts = str.split(/[.?!]\s*/) 
  .map(s => s.trim())         // Обрезаем пробельные символы по краям 
  .filter(s => s);            // Берём только непустые строки 
 
let wrapper = document.querySelector('#wrapper'); 
parts.forEach(s => { 
  let el = document.createElement('div'); 
  el.innerHTML = s; 
  el.classList.add('element') 
  wrapper.appendChild(el); 
});
.element { 
  margin: 2px; 
  border: 1px solid silver; 
}
<div id=wrapper></div>

READ ALSO
Перебор содержимого внутри всех div
jQuery

Перебор содержимого внутри всех div

Подскажите,как правильно реализовать перебор содержимого всех div с одинаковым классомНапример есть следующая структура:

 248
Проблема с поиском потомков
jQuery

Проблема с поиском потомков

есть следующая структура:

 173
Вызов функции по изменению переменной
jQuery

Вызов функции по изменению переменной

Есть переменная которая связана с полем (с использованием vue)Как вызвать функцию каждый раз когда переменная изменяется?

 168
Как распарсить json в ассоциативный массив / C#
c#

Как распарсить json в ассоциативный массив / C#

Есть ответ с сервера в виде json:

 316