Question

此问题建立在How to wrap word into span on user click in javascript提供的答案之上。

在我的示例中，用户可以双击任何单词以将其包装在span元素中，但是b / c这是基于在空白上拆分，如果单词后跟标点符号则不起作用。 / p>

HTML：

<div class="color-coding">
  <span class="orange color-coding">Hello world this is some text.</span>
  <br>
  <span class="orange color-coding">Here is some more!</span>
</div>

JS：

jQuery(document).ready(function($) {

$('.color-coding').dblclick(function(e) {

var range = window.getSelection() || document.getSelection() || document.selection.createRange();
var sword = $.trim(range.toString());
if(sword.length)
{

  var newWord = "<span class='highlight'>"+sword+"</span>";

  $(this).each(function(){
      $(this).html(function( _, html ) {
    return html.split(/\s+/).map(function( word ) {
      return word === sword ? newWord : word;
    }).join(' ');
  });
  });
}
range.collapse();
e.stopPropagation();
});

});

我可以为分割添加标点符号检测，但这当然会删除标点符号，我需要保留它，所以使用以下内容将无法满足我的需求：

html.split(/\s+|[.,-\/#!$%\^&\*;:{}=\-_`~()]/)

小提琴：http://jsfiddle.net/b11nxk92/3/

Answer 1

的execCommand

常绿浏览器的完美解决方案：

if(sword.length) {
    this.setAttribute('contenteditable','true');
    document.execCommand("insertHTML", false, "<span class='highlight'>"+sword+"</span>");
    this.removeAttribute('contenteditable');
}

此解决方案将容器切换到可编辑模式，然后触发命令以插入新的html代码。请参阅：https://msdn.microsoft.com/en-us/library/hh801231(v=vs.85).aspx#inserthtml和https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

小提琴：http://jsfiddle.net/b11nxk92/6/

正则表达式

另外，我喜欢RegExp所以我做了这个解决方案。

if (sword.length) {

    $(this).each(function(){
        $(this).html(function( _, html ) {
            return html.replace(
                new RegExp("([^\\w]|^)("+sword+")([^\\w]|$)","g"),
                "$1<span class='highlight'>$2</span>$3"
            );
        });
    });
}

而不是使用split然后使用join正则表达式选择三个元素（非单词字符或开头）+（我们的单词）+（非单词字符或结尾）然后使用$你选择保留它的位置。

小提琴：http://jsfiddle.net/b11nxk92/4/

即使与标点符号相邻，也会在单击中包含单词，保留标点符号（javascript）

1 个答案:

的execCommand

正则表达式