Question

我是一名iPhone应用开发者。我正在改变所选文字的颜色。这对我来说很好。但是当例如重复的单词很少时

Hi All.Hello world.I是iPhone app developer.Hello world.Stack overflow.Hello world。

这里'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

如果您只是为文本着色，那么Stefan的答案是最可靠和最简单的方法：

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

但是，看起来您正在添加一个类和一个单击处理程序，因此您需要更多的灵活性。

首先，无法在DOM的HTML表示中可靠地选择偏移。您可以通过anchorOffset，anchorNode，focusOffset和focusNode或DOM range直接在节点内选择偏移量。如果选择完全包含在单个文本节点中，则可以使用范围的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;
}

找到here

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>

Fiddler：http://jsfiddle.net/WQKCw/1/

选定的文字编辑

3 个答案: