选定文本编辑
我是一个iPhone应用程序的开发者，我正在改变选定文本的颜色。这对我来说很好。但是当没有几个重复的词，例如
你好，All.Hello世界，我是iPhone应用程序developer.Hello world.Stack overflow.Hello world。
这里的“你好”文本正在重复。当我选择最后的'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>有谁能对此提出解决方案。提前谢谢。
回答 3
Stack Overflow用户
发布于 2013-01-04 09:53:41
如果你只是在修饰文本，那么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);
}
}但是，这是非常脆弱的，只有在选择完全包含在单个文本节点中时才能工作。根据您想要做的事情，您可能需要一个更灵活的解决方案。
Stack Overflow用户
发布于 2013-01-04 08:37:59
要获得所选文本，必须使用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;
}发现这里
Stack Overflow用户
发布于 2013-01-04 08:39:56
使用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/
https://stackoverflow.com/questions/14153630
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号