0

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

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

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

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

Блок генерится после 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

8
  • и ещё каждую точку считает как окончание строки ... тоже косяк
    – user33274
    Commented 19 мая 2018 в 6:16
  • Хм, тогда у вас проблема с формулировкой задачи. Каковы признаки деления по блокам? Каждое слово, каждое предложение, может абзац, маркер? у вас как раз маркер "точка", но если это косяк - нужно определиться с тем, чего именно хочется.
    – vp_arth
    Commented 21 мая 2018 в 4:57
  • @vp_arth я попробую объяснить принцип , это тренировка просто , некий автор комментирует статью, после точки должно произойти разделение на блок , это происходит ..видно в DevTools но зато если не поставить точку или как в кодепен я и тире делал и слеш и что угодно то выходит пустой блок но с возможностью коментировать редактировать или удалить ...
    – user33274
    Commented 21 мая 2018 в 6:27
  • @vp_arth т.е другими словами split не так работает
    – user33274
    Commented 21 мая 2018 в 6:28
  • Всё, что вам нужно - удалить последний блок после сплита. Или даже лучше отфильтровать пустые предложения .split(/\.\s*/).map(s=>s.trim()).filter(s=>s) (Поможет при наличии многоточий, например)
    – vp_arth
    Commented 21 мая 2018 в 7:14

1 ответ 1

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>

1
  • а что с этим делать ?
    – user33274
    Commented 21 мая 2018 в 7:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.