Question

我正在寻找段落的文本范围，方法是指定我想要包围的文本范围的字符的开始和结束索引。

例：
<div id="my_text_area">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

通过将起始索引指定为18并将结束索引指定为我想要包围的文本范围的26，我需要JavaScript来更新内容：
<div id="my_text_area">Lorem ipsum dolor <span id="my_sub_selection">sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

我不喜欢使用库。

Answer 1

如果您的原始html与您发布的html一样简单，那么您可以在指定开始/结束位置时使用内部文本节点创建范围。

var node = document.querySelector('#my_text_area').childNodes[0],
    start = 18,
    end = 26;
    
    
var range = document.createRange();
range.setStart(node, start);
range.setEnd(node, end);

var wrap = document.createElement('span');
wrap.id = 'my_sub_selection';

range.surroundContents( wrap );

#my_sub_selection{background:yellow;}

<div id="my_text_area">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

在#my_text_area开始使用其他标签后，它开始变得复杂。

在这种情况下，使用类似Rangy的库可能会更好。

Answer 2

直到你发现更短的东西（有100％更短的东西），下面的方法就可以了。

我添加了2个未经过验证的输入，因此请务必输入有效值。如果需要，我会给你验证。

单击标记按钮将突出显示您输入的值的文本。

以下代码在应用新选择之前也会首先删除现有选择。

同样，这是一个复杂的代码，可以缩短和优化100％。只是为了让你开始。

document.getElementById('mark').addEventListener('click', function(){
  var start = document.getElementById('startIndex').value;
  var stop = document.getElementById('stopIndex').value;;
  markText(--start, --stop);
})

var markText = function(start, stop) {
  var markerTemplate = '<span id="my_sub_selection">{0}</span>';
  var element = document.getElementById('my_text_area');
  
  var data = element.innerHTML;
  
  data = removeMark(data);
  
  data = data.replace(data.substring(start, stop), markerTemplate.replace('{0}', data.substring(start, stop)));

  element.innerHTML = data;
}

var removeMark = function(data){
    var subSelect = document.getElementById('my_sub_selection');
    
    if(subSelect == undefined){
      return data;
    }

  var currentSelection = subSelect.outerHTML;
  var selectedText = subSelect.innerHTML;

  return data.replace(currentSelection, selectedText);
}

#my_sub_selection {
  background-color: yellow;
}

<input id="startIndex" />
<input id="stopIndex" />
<button id="mark" type="button">mark text</button>

<div id="my_text_area">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

只需指定字符的开始和结束索引

2 个答案: