如何使文本中的单词可点击？

Question

我正在寻找一种使文本中的单词可点击的解决方案，我曾考虑过将文本拆分为单词数组并为每个单词创建一个btn ...但是这种解决方案的效果不佳...有人知道？文本是：

const paragraph = 'Emma Woodhouse, handsome, clever, and rich, with a comfortable home and happy disposition, seemed to unite some of the best blessings of existence; and had lived nearly twenty-one years in the world with very little to distress or vex her.'

谢谢！

Answer 1

假设您要将这些单词放在html页面中，最好的选择是将每个单词都包装在<span>元素中，并将点击处理程序附加到<span>。

例如，

<span>Emma</span> <span>Woodhouse</span>...

然后是>>

Array.from(document.querySelectorAll('span')).forEach(span => {
 span.addEventListener('click', ...)
})
当然，使用React或其他框架或lib可能会有不同的首选方式。

[还有其他一些实现方法，例如，在document上实现点击处理程序以测试元素类型。这样，您只有一个用于所有元素的处理程序，而没有一个用于[[each

元素的处理程序。请参见MDN上的AddEventListener

Answer 2

除非它们是某种DOM元素，否则无法使其可点击。下面的示例演示如何使用

span

Answer 3

这是一个React解决方案：

Answer 4

我认为，除了将其转换为数组（例如，使用Array.from()），遍历句子并将每个字符呈现为可单独单击的元素之外，没有其他更好的方法来实现上述目的。