Как обернуть предыдущее, текущее и следующее слово внутри тега с помощью jQuery?

Несколько мыслей:

Я не понимаю, насколько жизнеспособным решением является упаковка всего в <span>. Что происходит, когда у вас есть что-то подобное?

<p>The <b>important terms</b> will be bolded in this text</p>

Когда вы выбираете The important, у вас будет какой-то хаос тегов, когда тело тега <span> хочет перекрыть тело тега <b>.

Я думаю, что лучшим решением было бы иметь несколько тегов выбора <span> с одним и тем же классом. Каждый раз, когда встречается HTML-тег, вы пропускаете его и создаете новый выбор <span>. Затем, когда вы перемещаете курсор, вы просто делаете это:

$(".selection:first").prepend(startCaret);
$(".selection:last").append(endCaret);

Я поэкспериментировал с этой идеей, и она мне понравилась. Если вы хотите по-настоящему фантазировать, вы можете попробовать объединить выделение <span>s, когда вы найдете закрывающий тег после того, как столкнетесь с его соответствующим начальным тегом, но это потребует много работы.

Ваши каретки перемещаются неправильно, потому что вы указали стиль абсолютного позиционирования. Измените это на относительное и дайте каждой вставке тела  . Вам придется поиграть с некоторыми другими настройками CSS для позиционирования, чтобы он выглядел правильно, но он движется так, как вы ожидаете, с этими изменениями (пример здесь).

Когда я обдумывал некоторые идеи для этого, я попытался выполнить абсолютное позиционирование кареток, чтобы их не нужно было перемещать внутри выделения <span>. Это была ошибка. У меня возникли проблемы с абзацами, которые выходили за пределы новой строки без какой-либо разметки. Оставайтесь с вашей идеей использования каретки внутри вашего выделения <span>.

И напоследок несколько вопросов для размышлений:

• Собираетесь ли вы ограничить объем? (т. е. если вы начинаете выбирать внутри тега <p>, не позволяйте выделению выходить за пределы этого тега на следующий <p> или что-то еще, что следует за ним)
• Некоторые теги будут недоступны для выбора? (например, <table>, <script>, <select> и т. д.)

Я думаю, что это крутая идея, но это мог бы быть довольно масштабный проект. Я опубликую некоторые из своих прототипов, которые я пробовал, когда я их немного отполировал.

Чтобы осветить проблему Расти:

Сначала разделите теги:

var textBlock = textContainer.html(),
taglessArray = textBlock.split(/<[^>]*>/),
arrayOfTags = textBlock.match(/<[^>]*>/g),
tagsFirst = (textBlock[0] === '<') ? true : false, //parens for legibility only
//tagsFirst is a switch that tells us which to start splicing back in later

Теперь давайте обернем все наши непробельные теги в теги span, которые мы можем использовать

var i = taglessArray.length;
while(i--){
    taglessArray[i].replace(/([^\s]*)/g,'<span class="selectableWord">$1</span>');
}
//not 100% sure I got that right - haven't tested - but the idea is , wrap all non
//whitespace/word boundary blocks in 'selectableWord' classed span tags

А теперь склеиваем их вместе. Исходные теги форматирования текста должны сохранять позицию. Очевидно, что классифицированные интервалы 'selectableWord' должны избегать воздействия на макет / форматирование

var addToArray, adderArray;
if(tagsFirst){ addToArray = arrayOfTags; adderArray = taglessArray; }
else { addToArray = taglessArray; adderArray = arrayOfTags; }

var oLen, //used to retain 'original length'
i2 = oLen = (tagsFirst.length + arrayOfTags.length),
rejoinArray = [];

while(i2--){ //not 100% sure I got this right - hope you get the general idea
    var currentKey = oLen - 1 - i2;
    //if first or alternating from first 0,2,4,etc...
    if(currentKey === 0 || ( currentKey % 2 === 0) {
        rejoinArray[currentKey] = addToArray.shift(); //remove first element and return
    }
    //should be keys 1,3,5,etc...
    else {
        rejoinArray[currentKey] = adderArray.shift();
    }
}

Все вышеперечисленное, конечно, очень непроверено и, вероятно, содержит ошибки / ошибки, но я думаю, что основная идея довольно крутая. Вырвите бирки. Оберните массив непомеченных слов в интервалы, которые вы можете использовать. Затем снова вставьте все эти глупые теги. Они все равно должны заключать в себя все те же слова. Это предполагает базовую целостность HTML. Ваши текстовые блоки содержат только встроенные отображаемые теги, которые охватывают слова или наборы слов. Неправильное размещение может не быть проблемой, если нет неправильного размещения промежутков.