使用javascript獲取文本選擇，然後修改文本

我在HTML頁面上有文本。如果用戶選擇一個單詞，我可以檢索所選單詞並確切知道他或她選擇了什麼。但是，我現在想要在屏幕上修改這個詞並使其變爲粗體。但我不知道如何做到這一點，因爲我只知道點擊的單詞，但沒有看到一種簡單的方法在HTML中查找單詞並對其進行修改。我當然可以搜索它，但有一個詞出現多次的風險。使用javascript獲取文本選擇，然後修改文本

一種不同的方式，我想過將是給每個單詞一個獨特的想法，並有這樣的事情：

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

但我不喜歡這種解決方案。這也似乎過於複雜，不是嗎？任何建議我怎麼才能訪問確切的話選擇？

來源

2017-01-12 George Welder

論''點擊，我將一個類添加到它（例如：強），並在CSS使強勢階層大膽。 –

當您選擇單個單詞時，您是否還希望文本在雙擊時加粗？怎麼選擇文本的不同部分？例如狐狸ju ** mps超過fen ** ce。 – Siavas

@RahulDesai好了，跨度解決方案就是我想要避免的！ –

您可以動態創建圍繞所選單詞跨度：

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); 
 
});

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

來源

2017-01-12 22:37:30

$("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>

來源

2017-01-12 17:26:47

我做**不**要使用跨度，我只是在段落或div中的純文本。用跨度做它是我能想到的唯一解決方案，但它感覺不對。我認爲我的問題可能含糊不清 –

我更新了我的解決方案。 –

不需要的jQuery的，也是沒有必要的ID對每個<span>的。

這個想法是一旦點擊一個類就會添加一個類，然後你可以使用該粗體類檢索所有元素。

這裏是純JavaScript的解決方案：

// comments inline

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 
 
    }); 
 
}

.strong { 
 
    font-weight: bold; 
 
}

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

讀了起來：Element.getElementsByTagName() - Web APIs | MDN

來源

2017-01-12 17:30:02

謝謝。但是，我不**需要使用跨度， - 我只是在段落或div中使用純文本。我只給出了跨度範例，因爲它是我能想到的唯一解決方案，但它感覺不對。或者這是做到這一點的唯一方法？ –

使用javascript獲取文本選擇，然後修改文本

回答

相關問題