Select partial text within a table cell, when I click a button

Question

There is a paragraph of text inside a <td></td> element in a table. For instance, the below paragraph.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

When I click a button, I want part of the text highlighted - for instance, the starting of the second sentence -> "It has survived not only".

I tried using the setSelectionRange() function. But that works only on <input> and <text area> elements. Are there any other similar functions that I can use for text content inside a <td> element?

did my code work or something wrong?

user23274861
– user23274861

2024-09-21 21:36:28 +00:00
Commented Sep 21, 2024 at 21:36 — user23274861
– user23274861, Commented Sep 21, 2024 at 21:36

user23274861 · Accepted Answer · 2024-01-21 07:02:10Z

Try this

let txt = "It has survived not only"
let range = document.createRange()
range.setStart(para.childNodes[0], para.childNodes[0].nodeValue.indexOf(txt))
range.setEnd(para.childNodes[0], para.childNodes[0].nodeValue.indexOf(txt) + txt.length)
getSelection().addRange(range)

<p id="para">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Collectives™ on Stack Overflow

Select partial text within a table cell, when I click a button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related