Question

我在HTML页面上有一个文本。如果用户选择了一个单词，我可以检索所选单词并确切地知道他或她选择了什么。但是，我现在想要在屏幕上修改这个单词并使其变为粗体。但我不知道如何做到这一点，因为我只知道单击的单词，但没有看到在HTML中找到单词并修改它的简单方法。我当然可以搜索它，但是有一个词出现多次的风险。

我想到的一种不同的方式是给每个单词一个独特的想法，并有类似的东西：

<span id="1">The</span> 
<span id="2">fox</span> 
<span id="3">jumps</span> 
<span id="4">over</span> 
<span id="5">the</span> 
<span id="6">fence</span>

但我不喜欢这个解决方案。这也似乎过于复杂，不是吗？任何建议我如何才能访问所选的确切字词？

Answer 1

$("p").mouseup(function() {

    var selection = getSelected().toString();

    $(this).html(function(){
        return $(this).text().replace(selection, '<strong>' + selection +'</strong>');
    });

});

var getSelected = function(){
    var t = '';
    if(window.getSelection) {
        t = window.getSelection();
    } else if(document.getSelection) {
        t = document.getSelection();
    } else if(document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

strong{ font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The fox jumps over the fence.</p>

Answer 2

不需要jQuery，也不需要每个<span>的ID。

这个想法是在点击后为跨度添加一个类，之后你可以用该粗体类检索所有元素。

以下是纯Javascript的解决方案：

// comments inline

＆＃13;

var spans = document.getElementsByTagName('span'); // get all <span> elements

for(var i=0, l = spans.length; i<l; i++){
  spans[i].addEventListener('click', function(){ // add 'click' event listener to all spans
    this.classList.toggle('strong'); // add class 'strong' when clicked and remove it when clicked again
  });
}

＆＃13;

.strong {
  font-weight: bold;
}

＆＃13;

<span>The</span> 
<span>fox</span> 
<span>jumps</span> 
<span>over</span> 
<span>the</span> 
<span>fence</span>

＆＃13;

阅读：Element.getElementsByTagName() - Web APIs | MDN

Answer 3

您可以动态创建围绕所选单词的范围：

＆＃13;

const p = document.querySelector('p');
p.addEventListener('mouseup', () => {
  const range = document.getSelection().getRangeAt(0);
  do {
    const charBefore = range.startContainer.textContent[range.startOffset - 1];
    if (charBefore.match(/\s/)) break;
    range.setStart(range.startContainer, range.startOffset - 1);
  } while (range.startOffset !== 0);
  do {
    const charAfter = range.endContainer.textContent[range.endOffset];
    if (charAfter.match(/\s/)) break;
    range.setEnd(range.endContainer, range.endOffset + 1);
  } while (range.endOffset !== range.endContainer.textContent.length);
  const span = document.createElement('span');
  span.style.fontWeight = 'bold';
  range.surroundContents(span);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The fox jumps over the fence.</p>

＆＃13;

使用javascript选择文本，然后修改文本

3 个答案: