Как получить до и после выбранного ввода текста

Question

Я пытаюсь реализовать Жирный и Курсив в Jquery со звездами и подчеркиванием (как в WhatsApp). Используя Библиотека выбора Madapaja , я могу добавить звезды или подчеркивания, но не могу понять, как удалить звезды или подчеркивания, если они существуют до и после выделенного текста. Я знаю, что есть повторяющиеся вопросы, но я хочу добиться этого с помощью библиотеки, так как она имеет кросс-браузерную поддержку.

Я добавляю звездочки вот так:

$(document).ready(function () {
    $('#boldButton').click(function () {

        var selection = $("#inputQuestion").selection();

        if (selection.trim()) {//not empty or not whitespace
            $('#inputQuestion')
            .selection('insert', { text: '*', mode: 'before' })
            .selection('insert', { text: '*', mode: 'after' });
        }
    });
});

к этому html:

<button id="boldButton" type="button" class="btn btn-default"><b>B</b></button>
<textarea class="form-control" rows="10" id="inputQuestion"></textarea>

Вы можете просмотреть вики и исходный код

Любая помощь или любые другие методы будут оценены!

Update : С ответом dpren я добился так:

$(document).ready(function () {
    $('#boldButton').click(function () {

        var selection = $("#inputQuestion").selection();
        var selectedPos = $("#inputQuestion").selection('getPos');

        if (selection.trim()) {//not empty or not whitespace
            var before = $('#inputQuestion')
                .selection('setPos', { start: selectedPos.start - 1, end: selectedPos.start })
                .selection();

            var after = $('#inputQuestion')
                .selection('setPos', { start: selectedPos.end, end: selectedPos.end + 1 })
                .selection();

            if (before == '*' && after == '*') { //already bold -> remove stars
                var before = $('#inputQuestion')
                    .selection('setPos', { start: selectedPos.start - 1, end: selectedPos.start })
                    .selection();

                $('#inputQuestion').selection('replace', { text: '' });

                var after = $('#inputSoru') //since we remove 'before', positions will decrese by one
                    .selection('setPos', { start: selectedPos.end-1, end: selectedPos.end })
                    .selection();

                $('#inputSoru').selection('replace', { text: ''});

            } else { // not bold -> make it bold
                $('#inputQuestion') //get back to user's selection
                .selection('setPos', { start: selectedPos.start, end: selectedPos.end })
                .selection();

                $('#inputSoru')
                    .selection('insert', { text: '*', mode: 'before' })
                    .selection('insert', { text: '*', mode: 'after' });
            }
        }
    });
});

Однако я думаю, что этот код имеет повторы. Есть ли способ добиться этого путем редактирования библиотеки выбора?

Answer 1

Вероятно, существует более простое решение вашей общей проблемы с синтаксическим анализом, но что касается вашего непосредственного вопроса, вы можете использовать getPos и setPos, чтобы расширить свой выбор после операции вставки.

var position = $('#inputQuestion')
    .selection('insert', { text: '*', mode: 'before' })
    .selection('insert', { text: '*', mode: 'after' })
    .selection('getPos');

var newSelection = $('#inputQuestion')
    .selection('setPos', {start: position.start - 1, end: position.end + 1})
    .selection();

JSFiddle demo