0

可能重复：
用另一个文本替换所选内容

我是 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>
4

3 回答 3

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>
于 2013-01-08T04:33:01.167 回答
0

看到这个：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-08T05:06:00.267 回答
0

也许您的代码不知道morning选择了哪个。谷歌Range或TextRange，这将是有帮助的！

于 2013-01-08T04:41:23.973 回答