JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<textarea class="conv">xxx: Hello!
yyy: Hi!
xxx: All projects you have access to are listed here. Public projects are not included here unless you are a member
yyy: При создании границ слова приходится использовать двойные слеши, потому что мы пишем их в нормальной строке, а не в регулярке с прямыми слешами. Второй аргумент для RegExp содержит опции для регулярок – в нашем случае “gi”, т.е. глобальный и регистро-независимый.</textarea>
<input type="button" value="Generate" class="gen" />
<div class="message-wrapper">

</div>

    <!-- <div class="message xxx"><div class="txt">Hello!</div></div>
    <div class="message yyy"><div class="txt">Hi!</div></div>
    <div class="message xxx"><div class="txt"> My Projects<br />All projects you have access to are listed here. Public projects are not included here unless you are a member </div></div>
    <div class="message yyy"><div class="txt">При создании границ слова приходится использовать двойные слеши, потому что мы пишем их в нормальной строке, а не в регулярке с прямыми слешами. Второй аргумент для RegExp содержит опции для регулярок – в нашем случае “gi”, т.е. глобальный и регистро-независимый.</div></div> //-->

CSS

textarea {
    width: 100%;
    height: 150px;
}
.message-wrapper{
    width:400px;
       border:1px solid #888; 
}
.message {
    display: block;
    margin:10px 10px;
    font-family: Helvetica;
}
.txt {
    display: inline-block;
    padding: 16px;   
    max-width: 256px;
    border-radius: 16px;
}
.xxx {
    text-align: right;
}
.xxx .txt {
    background: rgb(32, 150, 252);
    text-align: left;
    color: #FFF;
}
.yyy .txt {
    background: rgb(229, 229, 234);
}

JavaScript

function buildConversation() {
    var txt = $('.conv').val();
    $('.message-wrapper .message').remove();
    var phrases = txt.split('\n');
    var names = {};
    var xUsed = false;
    for(var i = 0; i < phrases.length; i++) {
        var name = phrases[i].match(/([^:]+)(\:)/gi)[0];
        if(name) {
            console.log(name, ':', (name in names));
            if(!(name in names)) {
                names[name] = (xUsed ? 'yyy': 'xxx');
                xUsed = true;
                console.log(names);
            }
            var mes = phrases[i].match(/(?:[:]).*/i)[0].substring(1);
            $('.message-wrapper').append('<div class="message ' + names[name] + '"><div class="txt">' + mes + '</div></div>');
        }
    }
}

$('.gen').click(function() {
    buildConversation();
});