Peut-on sélectionner du texte lors d'un pointage avec une ancre ?

Bonjour à vous tous,

Précédemment, je vous avais demandé s'il existait un moyen de pointer un paragraphe contenant une ancre <a>. Voici cette discussion : https://forum.alsacreations.com/topic-2-90719-1-Comment-utiliser-un-lien-local-sur-un-site-web-deja-existant-Y.html Je sais maintenant que cette fonctionnalité ne marche que sur Firefox et Safari et pas sur les autres navigateurs.

Aujourd'hui, je voudrais vous demander si vous savez comment faire pour sélectionner du texte après l'avoir pointé en utilisant l'attribut href du lien <a>.Voici un exemple parlant avec Google, j'envoie la requête suivante : "Peut-on cumuler les jours de congés payés sur plusieurs années ?". Il me répond en sélectionnant directement la partie concernée, comme le montre la capture écran suivante :
Je voudrais donc savoir si l'un de vous sait si on peut faire ça avec du HTML, CSS et Javascript, quand on clic sur un lien et que celui-ci pointe directement le paragraphe concerné et le sélectionne. Mon but est de faciliter la lecture de l'internaute en lui montrant directement la partie à lire.

Merci pour votre aide et
que le code soit avec vous !
Modifié par ObiJuanKenobi (02 Dec 2023 - 08:28)

Je ne sais pas du tout, je ne sais même pas par où commencer.

Dans ce cas j'ai peut être une piste, le fork d'un CodePen que j'ai gardé sous le coude : quelque chose qui se rapproche de CTRL + F.
Modifié par Olivier C (05 Dec 2023 - 12:20)

Merci Olivier pour ta proposition mais ce n'est pas une fonction de recherche que je cherche mais pointer un chapitre et le sélectionner. C'est-à-dire qu'avec l'id dans un paragraphe, on puisse cibler directement la partie concerné et en plus, le texte correspondant est sélectionné. Exemple, imagine une table des matières avec plusieurs chapitres et sous chapitres. Quand on clic sur le chapitre 1, la fenêtre défile pour s'arrête au début du chapitre 1 puis tout le premier paragraphe du chapitre 1 est sélectionné pour orienter le regard de l'internaute sur le texte à lire.

Mais sinon, ton exemple est pas mal.

OK.

Alors ce soir je suis penché sur mes propres projets, mais je vais te donner quelques indications...

Du coup, dans la ligne de ton topic précédent, tu es d'accords pour dire que le pointage sur l'élément lui même se fait avec une ancre dont l'ID est constitutive et que l'on y arrive avec le hash de l'URL. Exemple pour Alsacreations avec ton dernier message juste ci-dessus :
https://forum.alsacreations.com/topic-2-90750-1.html#p579121
Le hash est donc :

#p579121

On peut le récupérer en JavaScript avec cette variable globale :

window.location.hash

Du coup, pour cibler l'élément tu peux faire un truc du genre :

const maVariable = document.querySelector(window.location.hash);

pour ensuite la passer dans une fonction qui sélectionne le contenu de l'élément. Je te la donne en mille (récupérée sur StackOverflow) :

// @see  https://stackoverflow.com/questions/985272
 
const selectText = node => {
  if (document.body.createTextRange) {
    const range = document.body.createTextRange()
    range.moveToElementText(node)
    range.select()
  } else if (window.getSelection) {
    const selection = window.getSelection()
    const range = document.createRange()
    range.selectNodeContents(node)
    selection.removeAllRanges()
    selection.addRange(range)
  } else {
    console.warn('Could not select text in node: Unsupported browser.')
  }
}

On appellerait donc la fonction ainsi (qu'il faudra wrapper avec un événement click) :

selectText(maVariable);

Voilà voilà. Je n'ai rien testé à part la fonction de sélection que j'utilise pour mon propre compte. Bon courage, moi je retourne à mon propre code.
Modifié par Olivier C (05 Dec 2023 - 21:44)

Encore merci Olivier mais je ne comprends pas le Javascript, c'est du chinois pour mois. Je vais mettre de côté ce projet et je verrais plus tard.