更改文字的顏色上選擇

可能重複：
Replacing selected with another text 更改文字的顏色上選擇

我是新來的JavaScript和jQuery`。我選擇了一個單詞，然後點擊按鈕，我想要更改該文本的背景顏色。

我使用了span標籤來更改所選文本的顏色並替換功能來替換它。

但如果文字是像

大家好。你好，世界。早上好。早上好。

當我選擇了上午早上的文本時，它正在改變第一個早上文本的背景顏色。我用替換函數來替換文本。

任何人都可以爲此提出解決方案。

以下是我的代碼。

var selectedText = window.getSelection(); 

      var textd=$("#data").html(); 

      var normalText = $("#data").text(); 
      var startPosition = normalText.search(selectedText);      // this will give selected text start position. 
      var getPosition = selectedText.toString(); 
      var endPosition = parseInt(getPosition.length) + parseInt(startPosition); // this will give selected text end position.               var textToReplace = "<span id='" + startPosition + "' class='highlightedText' onclick=\"myOnclikFunction('"+selectedText+"')\"> "+selectedText+"</span>"; 
         var reT= textd.replace(selectedText,textToReplace); 
      $("#data").html(reT); 
     <style type = "text/css"> 

     #data { 
      font-size : 20px; 
      color : black; 
     } 

     .highlightedText { 
      background-color : red; 
     } 

     .replaceBgColor { 
      background-color: white; 
     } 

     </style> 
     <body> 

    <div id = "data" >From this you can tap on annotation to view the list of actions previously done like highlighting content, adding web links and notes. Tap on annotation you can view a popup with list of highlights, notes and web links where you can scroll the list.From this section you will be able to highlight part of content, add notes and web links. Upon long tap on the content a popup will be displayed where you can slide to select a part of content and select highlight option to highlight the content. From the same popup you will be able to add notes by tapping on notes button on the popup a text box will be displayed where you can enter the notes and save, you can also add web link in the same process by selecting add web link option in the popup.You can edit the notes and web links by selecting the annotations, where tapping on the annotations you can view the list, from the list you can select a particular notes or web link which will open in a text box to edit. After modification you can save or cancelTap on 「View all highlights」 to view all highlighted content in the selected material. Once you select view all highlights app will display all highlighted content, then 「View all highlights」 button will be changed to 「Hide all highlights」 which allows you to hide the highlight content.Tap on the 「Related material」 to view the related topics of the course selected and tap on videos to view the list of videos to view.My ClassesThis is the first screen after successful login, where you can view the classes list. Tap on the buttons to view current classes, past classes and future classes. You can tap on any option as per your choice from the three upon tapping the classes list will be shown in grid format with class details.You can tap on the following options to view classes:• Future Classes (The classes for which start date is after the current date)• Current Classes (The classes for which the current date is in between the start and end dates of particular class)• Past Classes (The classes for which the end date of class is before the current date)Based on the selection you can view the following class details: 
     <div/> 

     </body>

來源

2013-01-08 Sujit

你想更換所有的或特定選擇的子？ – alex

請包括您的代碼。 –

你必須包含你的代碼。見http://whathaveyoutried.com – gideon

試試這個：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
    <title>new document</title> 
    <script type="text/javascript"> 
    function setColor(){ 
     if(document.all){ 
      var tr = document.selection.createRange(); 
      tr.execCommand("ForeColor", false, "#FF0000"); 
     }else{ 
      var tr = window.getSelection().getRangeAt(0); 
      var span = document.createElement("span"); 
      span.style.cssText = "color:#ff0000"; 
      tr.surroundContents(span); 
     } 
    } 
    </script> 
</head> 
<body> 
<div>fdjlksafjd;slafjd;slakfjds</div> 

<input type="button" onclick="setColor()" value="setColor" /> 
</body> 
</html>

來源

2013-01-08 04:33:01 user1956939

也許你的代碼不知道哪個morning選擇。谷歌Range或TextRange，這將是有益的！

來源

2013-01-08 04:41:23

歡迎來到StackOverflow！雖然這個答案勉強可以接受，但一定要讓你的答案在將來更加徹底和完整！謝謝！ – Zyerah

非常感謝。我總是盡我所能寫下正確的答案，因爲英語不是我的第一語言。 –

沒問題，我們明白！盡你所能，如果需要澄清，我們會問。否則，我們將編輯清晰度，拼寫和語法。 – Zyerah

看到這個：http://jsfiddle.net/Tru86/

HMTL：

<div id = "data" >Hi all. Hello world. Good morning. Good morning.<div/> 
<input id="btn" type="submit" value="Highlight" />

腳本：

$("#btn").click(function() { 

    var selectedText = window.getSelection ? window.getSelection() : document.selection.createRange(); // second one for IE 

    var textd = $("#data").html(); 
    var normalText = $("#data").text(); 
    if (selectedText.getRangeAt) { 
    var range = selectedText.getRangeAt(0); 
    var newNode = document.createElement("span"); 
    newNode.setAttribute('class', 'highlightedText'); 
    range.surroundContents(newNode); 
    } 
    else { 
    selectedText.pasteHTML('<span class="highlightedText">' + selectedText.htmlText + '</span>'); 
    } 
    $('.highlightedText').replaceWith(swapText); 
});

來源

2013-01-08 05:06:00 Anujith

感謝您的回覆。但有一個錯誤。如果用戶選擇了第一個hello world文本，那麼根據此代碼它正在改變背景顏色。下次如果用戶選擇文本喜歡大家好，那麼它不會改變顏色。這裏大家好你需要改變背景顏色。你能爲此提出解決方案嗎？這對我有幫助。謝謝 – Sujit

@Sujit：看到更新的小提琴..http：//jsfiddle.net/Tru86/1/ – Anujith

@Sujit，如果它解決了接受答案.. – Anujith

更改文字的顏色上選擇

回答

相關問題