0

我是一名 iPhone 应用程序开发人员。我正在更改所选文本的颜色。这对我来说很好。但是当重复的单词很少时，例如

大家好。你好世界。我是 iPhone 应用程序开发人员。你好世界。堆栈溢出。你好世界。

这里重复“你好”文本。当我选择最后一个“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);
}

嗨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

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

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

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

首先，没有办法在 DOM 的 HTML 表示中可靠地获得选择作为偏移量。您可以通过anchorOffset、和直接将选择作为节点内的偏移量anchorNode，或作为DOM 范围。如果选择完全包含在单个文本节点中，则可以使用范围的方法：focusOffsetfocusNodesurroundContents()

演示：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

要获取选定的文本，您必须使用 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;
}

在这里找到

于 2013-01-04T08:37:59.897 回答
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 回答