選擇文字編輯

Question

我是iPhone應用程序開發人員。我正在更改所選文本的顏色。 這對我來說很好。 但是例如當重復的單詞很少時

大家好，你好，世界。我是iPhone應用程序開發人員。你好，世界。堆棧溢出。你好。

這里的“ Hello”文字在重復。 當我選擇最后一個“ 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>

誰能為此提出解決方案。 提前致謝。

Answer 1

如果您只是給文本加上顏色，那么斯特凡的答案是最可靠，最簡單的方法：

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

但是，似乎您要添加一個類和一個單擊處理程序，因此您需要更大的靈活性。

首先，無法可靠地在DOM的HTML表示形式中獲得作為偏移量的選擇。 您可以直接通過anchorOffset ， anchorNode ， focusOffset和focusNode將選擇作為節點內的偏移量focusNode ，也可以作為DOM范圍獲取。 如果所選內容完全包含在單個文本節點中，則可以使用范圍的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);
    }
}

但是，這非常脆弱，僅當選擇完全包含在單個文本節點中時才起作用。 根據您要執行的操作，您可能需要一個更靈活的解決方案。

Answer 2

要獲取選定的文本，您必須使用getSelection javascript方法。 我不知道該方法是否可以在iPhone瀏覽器上使用，但這是將所有瀏覽器的方法組合在一起的通用功能。

function getSelected() {
    var text = "";
    if (window.getSelection
    && window.getSelection().toString()
    && $(window.getSelection()).attr('type') != "Caret") {
        text = window.getSelection();
        return text;
    }
    else if (document.getSelection
    && document.getSelection().toString()
    && $(document.getSelection()).attr('type') != "Caret") {
        text = document.getSelection();
        return text;
    }
    else {
        var selection = document.selection && document.selection.createRange();

        if (!(typeof selection === "undefined")
        && selection.text
        && selection.text.toString()) {
            text = selection.text;
            return text;
        }
    }

    return false;
}

在這里找到

Answer 3

使用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/

選擇文字編輯

問題描述

3 個解決方案

解決方案1
1 2013-01-04 09:53:41

解決方案2
0 2013-01-04 08:37:59

解決方案3
-1 2013-01-04 08:39:56

選擇文字編輯

問題描述

3 個解決方案

解決方案1 1 2013-01-04 09:53:41

解決方案2 0 2013-01-04 08:37:59

解決方案3 -1 2013-01-04 08:39:56

解決方案1
1 2013-01-04 09:53:41

解決方案2
0 2013-01-04 08:37:59

解決方案3
-1 2013-01-04 08:39:56