如何在用户单击javascript时将文字包装成跨度 [英] How to wrap word into span on user click in javascript
问题描述
< p>
载人太空探索和太空发展的未来主要取决于
创建的航天运输显着更精通的推进架构。
调查核动力在火箭中的适用性的一个非常有说服力的理由是,与化学燃烧能量相比,核燃料的能源密度增加
...
< / p>
我想要:当用户点击它时将单词换成范围。
ie 用户点击了 字样,比我应该得到的更多。
< p>
< span class =touching>有人驾驶< / span>的未来太空探索和太空的发展很大程度上取决于
的创造....
问题:如何做到这一点?有没有更有效率的方法可以在装载阶段将所有文字都包含进来?
PS 我对 特殊对于@DavidThomas: 示例,我可以获取选定的文本,但不知道如何将其包裹到跨度。 我是你,我会用 然后我们可以有一个全局处理函数,它监听 示例: http://jsfiddle.net/z54kehzp/ 我稍微修改了@ Jonast92解决方案,我也喜欢他的方法。对于大数据量,它甚至可能会更好。只有在那里注意,你必须用双击选择一个单词。 示例: http://jsfiddle.net/5D4d3/106/ I have: Simple block of html text: I want: wrap word into span when user click on it. I.e. User clicked at manned word, than I should get Question: How to do that? Is there way more efficient that just wrap all words into span at loading stage? P.S. I'm not interested in Special for @DavidThomas: example where I get selected text, but do not know how to wrap it into span. I were you, I'd wrap all words with and then we could have a global handler, which listens for Example: http://jsfiddle.net/z54kehzp/ I modified @Jonast92 solution slightly, I like his approach also. It might even be better for huge data amounts. Only caveat there, you have to live with a doubleclick to select a word. Example: http://jsfiddle.net/5D4d3/106/ 这篇关于如何在用户单击javascript时将文字包装成跨度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! window.getSelection()
,因为我想暗示某些特定的被感动单词的样式,并且还保留了被感动的单词的集合。
< span>
标签,只需在点击时更改 class
即可。这可能看起来像
$('p').html(function(_,html){
return html .split(/ \ s + /).reduce(function(c,n){
return c +'< span>'+ n +'< / span>'
});
});
click events
< span>
节点
$ (document.body).on('click','span',function(event){
$(event.target).addClass('touch');
});
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
<p>
The future of <span class="touched">manned</span> space exploration and development of space depends critically on the
creation of a ....
window.getSelection()
because I want to imply some specific styling for touched words and also keep collection of touched words<span>
tags beforehand and just change the class
on click. This might look like$( 'p' ).html(function( _, html ) {
return html.split( /\s+/ ).reduce(function( c, n ) {
return c + '<span>' + n + ' </span>'
});
});
click events
on <span>
nodes$( document.body ).on('click', 'span', function( event ) {
$( event.target ).addClass( 'touch' );
});