Question

我有：简单的html文字块：

<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>

我想：当用户点击它时将单词换成span。

I.e。用户点击了载人字，而不是我应该

<p>
The future of <span class="touched">manned</span> space exploration and development of space depends critically on the
creation of a ....

问题：怎么做？是否有更高效的方法只是在加载阶段将所有单词包装到span中？

P.S。我对window.getSelection()不感兴趣，因为我想暗示一些特定的样式，用于触摸的单词，并保留感人的单词的集合

@DavidThomas特别： example where I get selected text, but do not know how to wrap it into span。

Answer 1

我是你，我事先用<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' );
});

示例：http://jsfiddle.net/z54kehzp/

我稍微修改了@ Jonast92解决方案，我也喜欢他的方法。对于巨大的数据量甚至可能更好。只有在那里警告，你必须用双击才能选择一个单词。

示例：http://jsfiddle.net/5D4d3/106/

Answer 2

我将以前的answer修改为几乎获取您正在寻找的内容，如demo所示。

它找到当前单击的单词并在字符串周围包含该特定类的跨度，并用新内容替换段落的内容，之前单击的单词将替换为新包装的字符串。

它有点受限，因为如果你点击另一个单词的子字符串，让我们说'是'，那么它将尝试替换段落中该字符串的第一个实例。

你可以用它来实现你想要的东西，但最主要的是看。

修改后的代码：

$(document).ready(function()
{
    var p = $('p');
    p.css({ cursor: 'pointer' });
    p.dblclick(function(e) {
        var org = p.html();
        var range = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(range.toString());
        if(word != '')
        {
            var newWord = "<span class='touched'>"+word+"</span>";
            var replaced = org.replace(word, newWord);
            $('p').html(replaced);
        }
        range.collapse();
        e.stopPropagation();
    });    
});

然后，@ jAndy的答案看起来很有希望。

Answer 3

你的回答激发了我对next solution：

的启发

$(document).ready(function()
{
    var p = $('p');
    p.css({ cursor: 'pointer' });
    p.dblclick(function(e) {
        debugger;
        var html = p.html();
        var range = window.getSelection() || document.getSelection() || document.selection.createRange();
        var startPos = range.focusOffset; //Prob: isn't precise +- few symbols
        var selectedWord = $.trim(range.toString());            
        var newHtml = html.substring(0, startPos) + '<span class=\"touched\">' + selectedWord + '</span>' + html.substring(startPos + selectedWord.length);
        p.html(newHtml);
        range.collapse(p);
        e.stopPropagation();
    });    
});

我们还没有在span中包含每个单词。相反，我们只在点击时包装单词。

Answer 4

使用

range.surroundContents（节点）

  $('.your-div').unbind("dblclick").dblclick(function(e) {
    e.preventDefault();
    // unwrap .touched spans for each dblclick.
    $(this).find('.touched').contents().unwrap();
    var t = getWord();
    if (t.startContainer.nodeName == '#text' && t.endContainer.nodeName == '#text') {
      var newNode = document.createElement("span");
      newNode.setAttribute('class', 'touched');
      t.surroundContents(newNode);
    }
    e.stopPropagation();
  });

  function getWord() {
    var txt = document.getSelection();
    var txtRange = txt.getRangeAt(0);
    return txtRange;
  }

如何在用户点击javascript中将单词换入span

4 个答案: