Tengo un texto en una página HTML. Si el usuario selecciona una palabra, puedo recuperar la palabra seleccionada y saber exactamente lo que él o ella seleccionó. Sin embargo, ahora también quiero modificar esta palabra en la pantalla y ponerla en negrita. Pero no sé cómo haría esto, ya que solo sé la palabra en la que se hizo clic, pero no veo una manera fácil de encontrar la palabra en el HTML y modificarla. Por supuesto, podría buscarlo, pero existe el riesgo de que aparezca una palabra varias veces.

Una forma diferente en la que pensé sería darle a cada palabra una idea única y tener algo como esto:

<span id="1">The</span> 
<span id="2">fox</span> 
<span id="3">jumps</span> 
<span id="4">over</span> 
<span id="5">the</span> 
<span id="6">fence</span>

Pero a no me gusta esta solución . Esto también parece demasiado complicado, ¿no? ¿Alguna sugerencia de qué otra forma podría acceder a las palabras exactas seleccionadas ?

2
George Welder 12 ene. 2017 a las 20:20

3 respuestas

La mejor respuesta

Puede crear dinámicamente un espacio que rodea la palabra seleccionada:

const p = document.querySelector('p');
p.addEventListener('mouseup', () => {
  const range = document.getSelection().getRangeAt(0);
  do {
    const charBefore = range.startContainer.textContent[range.startOffset - 1];
    if (charBefore.match(/\s/)) break;
    range.setStart(range.startContainer, range.startOffset - 1);
  } while (range.startOffset !== 0);
  do {
    const charAfter = range.endContainer.textContent[range.endOffset];
    if (charAfter.match(/\s/)) break;
    range.setEnd(range.endContainer, range.endOffset + 1);
  } while (range.endOffset !== range.endContainer.textContent.length);
  const span = document.createElement('span');
  span.style.fontWeight = 'bold';
  range.surroundContents(span);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The fox jumps over the fence.</p>
0
Michał Perłakowski 12 ene. 2017 a las 22:37
$("p").mouseup(function() {

    var selection = getSelected().toString();

    $(this).html(function(){
        return $(this).text().replace(selection, '<strong>' + selection +'</strong>');
    });

});

var getSelected = function(){
    var t = '';
    if(window.getSelection) {
        t = window.getSelection();
    } else if(document.getSelection) {
        t = document.getSelection();
    } else if(document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}
strong{ font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The fox jumps over the fence.</p>
0
Serg Chernata 12 ene. 2017 a las 18:29

No necesita jQuery, tampoco necesita ID para cada <span>.

La idea es agregar una clase al lapso una vez que se hace clic y luego puede recuperar todos los elementos con esa clase en negrita.

Aquí hay una solución con Javascript puro:

// comments inline
var spans = document.getElementsByTagName('span'); // get all <span> elements

for(var i=0, l = spans.length; i<l; i++){
  spans[i].addEventListener('click', function(){ // add 'click' event listener to all spans
    this.classList.toggle('strong'); // add class 'strong' when clicked and remove it when clicked again
  });
}
.strong {
  font-weight: bold;
}
<span>The</span> 
<span>fox</span> 
<span>jumps</span> 
<span>over</span> 
<span>the</span> 
<span>fence</span>

Leer más: Element.getElementsByTagName() - API web | MDN

0
Rahul Desai 12 ene. 2017 a las 17:35