请教一下，如何用Javascript实现双击选中页面中英文单词并将其颜色改变的功能。
首先我想要的功能是是需要按空格将每个英文单词分割开来的，比如我的body标签里有”hello world“，那我点击hello的时候，是只有hello变红，world应该不变色。另外我希望单词变色之后颜色就会一直保持为改变后的颜色，而不是暂时性的，因为后续还需要将选中的单词加入数据库，谢谢！
http://bbs.csdn.net/topics/392327945#post-403081542
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<span id="word1" onclick="c1()">hello</span> <span id="word2" onclick="c2()">world</span>
<script type="text/javascript">
function c1(){
var w1 =document.getElementById("word1");
w1.style.color="red";
}
function c2(){
var w2 =document.getElementById("word2");
w2.style.color="blue";
}
</script>
</body>
</html>
会用jquery的话可以进行相应的改动，可以不用id来控制
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body id="body">
<script type="text/javascript">
function selectText() {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('selectable'));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('selectable'));
window.getSelection().addRange(range);
}
}
$(function () {
$("body").on("dblclick",function () {
console.log(123);
var selection = window.getSelection();
var selText = selection.anchorNode.textContent.substr(selection.anchorOffset,selection.focusOffset);
//拼接新的html
//头部
var newHtml = selection.anchorNode.textContent.substr(0,selection.anchorOffset);
//选中文字变色
newHtml+="<span style='color: #00F7DE'>"+selText+"</span>";
//尾部
newHtml+=selection.anchorNode.textContent.substr(selection.focusOffset,selection.anchorNode.textContent.length);
//更新dom
//$(selection.anchorNode).remove();
//$("").html("12321");
$("p:contains('"+selection.anchorNode.textContent+"')").html(newHtml);
})
});
</script>
<p id="_p_dd">hellow 你的名字叫什么</p>
<p>你的名字叫什么name </p>
<inpu>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style type="text/css">
.red{color: red;}
</style>
</head>
<body id="body">
<script type="text/javascript">
function initContent(){
var html = document.querySelectorAll('.content')[0].innerHTML.split(" ");
var arr = html.map((x)=>' <span>'+x+'</span> ');
document.querySelectorAll('.content')[0].innerHTML = arr.join("");
}
$(function() {
initContent();
$(".content span").on('dblclick',function(){
$(this).toggleClass('red');
})
});
</script>
<p class="content">hello world hello, he. hea!</p>
</body>
</html>
尝试过在字符串里面添加span 第一次都是OK的，但是第二次就会出问题。选取的坐标就不正确了。所以只有先初始化里面的内容在做处理