0

重複の可能性:
選択したテキストを別のテキストに置き換える

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>
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が選択されているかを知りませんでした。GoogleRangeまたはTextRange、これは役に立ちます。

于 2013-01-08T04:41:23.973 に答える