0

私はiPhoneアプリの開発者です。選択したテキストの色を変更しています。これは私にとってはうまく機能しています。しかし、たとえば繰り返し単語が少ない場合

こんにちはAll.Helloworld.IはiPhoneアプリ開発者です。Helloworld.Stackoverflow.Helloworld。

ここで「こんにちは」のテキストが繰り返されています。最後の「Hello」テキストを選択すると、最初の「Hello」テキストインデックスが表示されます。試しましたがindexOf(),search()、anchorOffset()機能しません。

以下は私のコードです。

function heighlightText(data) {
    var selectedText = window.getSelection();

    var textd=$("#data").html(); // this will give me whole text.

    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 startPart = textd.substr(0,startPosition);
    var lastPart = textd.substr(endPosition,textd.length);
    var reT = startPart + textToReplace + lastPart;

    $("#data").html(reT);
}

Hy HTML：

<style type = "text/css">
    #data {
        font-size : 20px;
        color : black;
    }

    .highlightedText {
        background-color : red;
    }
</style>

<body>
    <div id = "data" >Lots of text here...
    <div/>
</body>

誰かがこれに対する解決策を提案できますか？前もって感謝します。

4

3 に答える 3

2

テキストに色を付けるだけなら、ステファンの答えが最も信頼性が高く簡単な方法です。

document.execCommand("ForeColor", false, "#0000FF");

ただし、クラスとクリック ハンドラーを追加しているように見えるため、さらに柔軟性が必要です。

まず、選択範囲を DOM の HTML 表現内のオフセットとして確実に取得する方法がありません。anchorOffset、anchorNode、focusOffsetおよびを介して直接ノード内のオフセットfocusNodeとして、またはDOM 範囲として選択を取得できます。選択範囲が 1 つのテキスト ノードに完全に含まれている場合は、範囲のsurroundContents()メソッドを使用できます。

デモ: http://jsfiddle.net/UvBTq/

コード：

function highlightText(data) {
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
        var range = selection.getRangeAt(0);
        var selectedText = range.toString();

        var span = document.createElement("span");
        span.id = "span_" + range.startOffset + "_" + range.endOffset;
        span.className = "highlightedText";
        span.onclick = function() {
            myOnclikFunction(selectedText);
        };

        range.surroundContents(span);

        // Restore selection
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

ただし、これは非常に脆弱であり、選択範囲が単一のテキスト ノード内に完全に含まれている場合にのみ機能します。何をしようとしているかによっては、より柔軟なソリューションが必要になる場合があります。

于 2013-01-04T09:53:41.567 に答える
0

contenteditable="true" and document.execCommand('ForeColor', false, 'YOURCOLOR');代わりに使用

例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo</title>

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
    <script type='text/javascript'>
        $(function () {
            $('#color').click(function () {
                document.execCommand('ForeColor', false, '0000FF');
            });
        });
    </script>
</head>
<body>
    <p contenteditable="true">Hello world</p>
    <button id="color">Change Color</button>
</body>
</html>

フィドラー: http://jsfiddle.net/WQKCw/1/

于 2013-01-04T08:39:56.993 に答える