选定的文字编辑 [英] selected text editing
问题描述
我是一名iPhone应用开发者。我正在更改所选文字的颜色。这对我来说很好。但是当重复的单词很少时，例如
I am a iPhone app developer.I am changing the color of selected text. This is working fine for me. But when there are few repeated words for example
Hi All.Hello world.I是iPhone app developer.Hello world.Stack overflow.Hello世界。
Hi All.Hello world.I am iPhone app developer.Hello world.Stack overflow.Hello world.
这里的'Hello'文字正在重复。当我选择最后一个'Hello'文本时，它会给我第一个'Hello'文本索引。我尝试了 indexOf（），search（）和 anchorOffset（）但这不起作用。
Here 'Hello' text is repeating. When i am selecting last 'Hello' text it is giving me first 'Hello' text index. I tried indexOf(),search() and anchorOffset() but this is not working.
以下是我的代码。
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>
任何人都可以为此提出解决方案。
提前致谢。
Can any one suggest solution for this. Thanks in advance.
推荐答案
如果您只是为文本着色，那么Stefan的答案是最可靠的最简单的方法：
If you're just colouring the text, then Stefan's answer is the most reliable and easiest way:
document.execCommand("ForeColor", false, "#0000FF");
然而，看起来你正在添加一个类和一个点击处理程序，所以你需要更多灵活性。
However, it looks as though you're adding a class and a click handler, so you need more flexibility.
首先，没有办法在DOM的HTML表示中可靠地选择偏移量。您可以直接通过 anchorOffset ， anchorNode ， focusOffset 和 focusNode ，或者作为 DOM范围。如果选择完全包含在单个文本节点中，则可以使用范围的 surroundContents（）方法：
First, there is no way to get a selection as offsets within an HTML representation of the DOM reliably. You can get the selection as offsets within nodes directly via anchorOffset, anchorNode, focusOffset and focusNode, or as a DOM range. If the selection is completely contained within a single text node, you can use the range's surroundContents() method:
演示： 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);
}
}
然而，这非常脆弱，只有在选择完全包含在单个文本节点中。根据您的尝试，您可能需要更灵活的解决方案。
However, this is very brittle and will only work when the selection is completely contained within a single text node. Depending on what you're trying to do, you may need a more flexible solution.
这篇关于选定的文字编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
