Используйте Javascript для получения предложения щелкнутого слова

Это проблема, с которой я сталкиваюсь, и я не совсем уверен, как подойти к ней.

Скажем, у меня есть параграф:

"This is a test paragraph. I love cats. Please apply here"

И я хочу, чтобы пользователь мог щелкнуть любое из слов в предложении, а затем вернуть все предложение, содержащее его.

Ответ 1

Сначала вам придется разделить свой абзац на элементы, так как вы не можете (легко) обнаруживать клики по тексту без элементов:

$('p').each(function() {
    $(this).html($(this).text().split(/([\.\?!])(?= )/).map(
      function(v){return '<span class=sentence>'+v+'</span>'}
   ));
});

Обратите внимание, что он правильно разделяет абзацы, подобные этому:

<p>I love cats! Dogs are fine too... Here a number : 3.4. Please apply here</p>​

Затем вы должны привязать клик:

$('.sentence').click(function(){
    alert($(this).text());
});

Демонстрация

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

Ответ 2

Прежде всего, будьте готовы принять определенный уровень неточности. Это может показаться простым на поверхности, но попытка разобрать естественные языки - это упражнение в безумии. Предположим, что все предложения помечены символом ., ? или !. Мы можем забыть о interrobangs и т.д. На данный момент. Пусть также игнорирует цитируемую пунктуацию, такую ​​как "!", которая не заканчивает предложение.

Кроме того, попробуйте захватить кавычки после пунктуации, так что "Foo?" заканчивается как "Foo?", а не "Foo?.

Наконец, для простоты предположим, что внутри абзаца нет вложенных тегов. Это не очень безопасное предположение, но это упростит код, а обработка вложенных тегов - отдельная проблема.

$('p').each(function() {
    var sentences = $(this)
        .text()
        .replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g, 
                 '<span class="sentence">$1</span>$2');
    $(this).html(sentences);
});

$('.sentence').on('click', function() { 
    console.log($(this).text()); 
});​

Это не идеально (например, процитированная пунктуация сломает его), но он будет работать 99% времени.

Ответ 3

  • Соответствует предложениям. Вы можете использовать регулярное выражение вдоль линий /[^!.?]+[!.?]/g для этого.
  • Замените каждое предложение оберткой span, которая имеет событие click, чтобы предупредить весь диапазон.

Ответ 4

Я предлагаю вам взглянуть на Выбор и диапазоны в JavaScript.

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

Библиотека Javascript для получения перекрестного браузера Selection Rang Rangy.

Ответ 5

Не уверен, как получить полное чувство. но вы можете попробовать это, чтобы получить слово за словом, если вы разделите каждое слово пробелами.

     <div id="myDiv" onmouseover="splitToSpans(this)" onclick="alert(event.target.innerHTML)">This is a test paragraph. I love cats. Please apply here</div>
function splitToSpans(element){
    if($(element).children().length) 
        return;
    var arr = new Array();
    $($(element).text().split(' ')).each(function(){
    arr.push($('<span>'+this+' </span>'));
    });
    $(element).text('');
    $(arr).each(function(){$(element).append(this);});
}