Вопрос по сути продолжение этого вопроса
Стал дорабатывать, сделал разбиение внутри элемента.
Каждое слово оборачиваю через функцию в блок внутрь которого выводится панель .
Проблема в том выводится пустое сообщение т.е этот блок
Блок генерится после 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
.split(/\.\s*/).map(s=>s.trim()).filter(s=>s)
(Поможет при наличии многоточий, например)