Question

可能重复：
Replacing selected with another text

我是JavaScript和jQuery的新手。我正在选择一个单词并在按钮上单击，我想更改该文本的背景颜色。

我使用span标签更改所选文字的颜色，并替换功能以替换它。

但如果文字就像

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

当我选择昨天早上的文字时，它正在改变第一个早晨文本的背景颜色。我用replace函数替换了文本。

任何人都可以为此提出解决方案。

以下是我的代码。

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>

Answer 1

试试这个：

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

Answer 2

也许您的代码不知道选择了哪个morning。 Google Range或TextRange，这会有所帮助！

Answer 3

请参阅：http://jsfiddle.net/Tru86/

HTML：

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

在选择时更改文本的颜色

3 个答案: