Могу ли я получить один символ из строки после нажатия?

Question

У меня есть DOM документ с текстовым содержимым вроде как:

<p>Content scripts aren't completely cut off from their parent extensions. A content script can exchange messages with its parent extension</p> 

Когда я щелкаю по этой HTML (текст) я получаю nodeValue как текст. Но могу ли я получить только символ из текста?

Для examaple, я щелкнуть по символу s в тексте:

<p>They support then</p> 

Answer 1

Так что это довольно простая схема, когда один хочет, чтобы делать операции на отдельных персонажах, но у вас есть данные в блоках пункта или слов , Первое, что нужно сделать было бы перебрать все пункты, например, так:

var paras = document.querySelectorAll('p'); 
for (var i = 0; i < paras.length; i++) { 
    var para = paras[i]; 

    var text = para.textContent; 
    var split = para.split(''); 
    var newText = ''; 
    for (var j = 0; j < split.length; j++) { 
     newText += '<span class="char">' + split[j] + '</span>'; 
    } 

    para.innerHTML = newText; 
} 

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

document.body.addEventListener('click', function(e) { 
    if (e.target.classList.contains('char')) { 
      console.log(e.clientLeft, e.clientTop); 
    } 
}); 

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

Обратите внимание, что это уничтожит события и ссылки на объекты - если вам нужно их сохранить, используйте что-то вроде jQuery's replaceWith и перебирайте текстовые узлы.