[need]
    [pic]ссылка на картинку размером 100х100[/pic]
    [zagolovok]кого ищем[/zagolovok]
    [celeb]имя знаменитости[/celeb]
    [name]имя фамилия, возраст[/name]
    [occ]род деятельности[/occ]
    [text]ваш текст заявки
    [/text]
    [/need]

<!--HTML--><script>    $(document).ready(function () {
        var elm = document.getElementsByTagName("div");
        for (let x = 0; x < elm.length; x++) {
            if (elm[x].className === "post-content") {
                //var post = elm[x].innerHTML;
                var code_box = "";
                if ($(elm[x]).find('.code-box').length>0) {
                    var code_box  = $(elm[x]).find('.code-box').clone()[0];
                    console.log('code_box', code_box);
                    $(elm[x]).find('.code-box').remove();
                }
                var post = elm[x].innerHTML;

 if (post.indexOf("[/need]") != -1) {
                    console.log(post.indexOf("[/need]"))
                    exs = /\[need\]([\s\S]*?)\[\/need\]/gi;
                    post = post.replace(exs, "<div class='need-theme'>$1</div>");
                }
                if (post.indexOf("[/zagolovok]") != -1) {
                    exs = /\[zagolovok\]([\s\S]*?)\[\/zagolovok\]/gi;
                    post = post.replace(exs, "<div class='zagolovok'>$1</div>");
                }
                if (post.indexOf("[/pic]") != -1) {
                    exs = /\[pic\]([\s\S]*?)\[\/pic\]/gi;
                    post = post.replace(exs, "<img class='picture' src='$1'></img>");
                }
                if (post.indexOf("[/text]") != -1) {
                    exs = /\[text\]([\s\S]*?)\[\/text\]/gi;
                    post = post.replace(exs, "<div class='text'>$1</div>");
                }
                if (post.indexOf("[celeb]") != -1) {
                    exs = /\[celeb\]([\s\S]*?)\[\/celeb\]/gi;
                    post = post.replace(exs, "<div class='celeb'>$1</div>");

                }
                if (post.indexOf("[name]") != -1) {
                    exs = /\[name\]([\s\S]*?)\[\/name\]/gi;
                    post = post.replace(exs, "<div class='name'>$1</div>");

                }if (post.indexOf("[occ]") != -1) {
                    exs = /\[occ\]([\s\S]*?)\[\/occ\]/gi;
                    post = post.replace(exs, "<div class='occ'>$1</div>");

                }
                if (code_box.outerHTML) {
                    elm[x].innerHTML = post+code_box.outerHTML;

                }else {
                    elm[x].innerHTML = post;
                }

            }

        }

    });


</script>

<style>
    .need-theme {
        width: 672px;
        height: 210px;
        background: url(https://forumstatic.ru/files/000e/d6/90/16486.png);
        position: relative;
        margin:0 auto;
        display: block;

    }

    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');
    .need-theme img.picture {
        position: absolute;
    top: 85px;
    left: 33px;
}

    .need-theme .zagolovok {
    color: #ffffff;
    position: absolute;
    top: 7px;
    height: 33px;
    left: 53px;
    width: 566px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px!important;
    font-family: 'Roboto'!important;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0px rgb(84, 117, 59);
    }

    .need-theme .text {
        position: absolute;
        top: 88px;
        left: 150px;
        width: 488px;
        color: #676565;
        font-size: 11px;
        padding-right: 10px;
        height: 92px;
        overflow-y: auto;
    }

    .need-theme .celeb,  .need-theme .name,  .need-theme .occ {
width: 180px;
    height: 13px;
    color: #fff;
    padding-top: 3px;
    position: absolute;
    top: 51px;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px!important;
    font-family: 'Roboto'!important;
    letter-spacing: 0.5px;
text-shadow: 1px 1px 0px rgb(160, 112, 72);
    }
    .need-theme .name {
        left: 241px;
    }
    .need-theme .celeb {
        left: 29px;
    }

    .need-theme .occ {
        left: 453px;
    }

</style>