请教Javascript如何实现双击选中页面中英文单词并将其颜色改变的功能 5C

请教一下,如何用Javascript实现双击选中页面中英文单词并将其颜色改变的功能。
首先我想要的功能是是需要按空格将每个英文单词分割开来的,比如我的body标签里有”hello world“,那我点击hello的时候,是只有hello变红,world应该不变色。另外我希望单词变色之后颜色就会一直保持为改变后的颜色,而不是暂时性的,因为后续还需要将选中的单词加入数据库,谢谢!

4个回答

 <!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来控制

probelover
probelover 回复金元宝kkk: 对,因为你是以单词为单元的。而且一般点击的话都是a标签,肯定是分开的,或者就得换思路
接近 2 年之前 回复
weixin_38841441
金元宝kkk 回复probelover: 你这个方法必须先把一段文字全都parse成一个个单独的单词并且加上span标签是吗?那感觉parse的工作量就繁琐了
接近 2 年之前 回复
probelover
probelover 此方法是在不刷新页面的情况下可以改变,若要刷新后还可以保持变色,需要进行与数据库的交互操作,如加一个被点击过的字段,在现在数据的时候变返回到页面,从而在css中进行控制颜色
接近 2 年之前 回复
 <!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的,但是第二次就会出问题。选取的坐标就不正确了。所以只有先初始化里面的内容在做处理

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
IDEA修改选取单词颜色和搜索结果的颜色
一、修改选取单词颜色下图所示,选取Father后背景为淡蓝色,其它相同单词背景为灰色,根本看不清楚修改配置 1.修改选取文本背景色为78C9FF 2.修改相同文本背景色为78C9FF,包括identifier under caret(write) 和identifier under caret 效果图 二、修改搜索结果颜色修改配置,背景色为78C9FF 效果图
Geany 编辑器打开 高亮所选单词 功能
Geany 编辑器打开的高亮所选单词 功能 Finally, I set the Geany as the alternative for Notepad++ in Ubuntu ref: http://plugins.geany.org/addons.html ===============
PhpStorm选中相同文字高亮
setting-》plugins-》Browse Repositories 输入BrowseWordAtCaret 搜索,安装,然后重启;Settings -》 Editor -》 General -》 Appearance -》 Browse Word At Caret 勾选。然后在代码编辑窗口,双击一个单词,其他相同的单词背景都高亮显示;如果想修改默认的颜色,在Settings -》 Edito
Eclipse 变量点击高亮显示以及自定义高亮显示颜色
1、方法一:alt+shift+o 打开/关闭,该功能 2、方法二:windows-> preferences->java->Editor->Mark Occurences (如下图显示) 3、自定义高亮显示颜色 黄绿色小清新,更醒目,原谅我这一生不羁放纵爱XP系统,啊哈哈,(逃。。
Eclipse中,点击某一单词,其他相同单词没有改变底色提示的问题
在Eclipse进行代码编写或者代码审查过程中,经常使用双击某一单词,
IDEA修改选取单词颜色和
如图:
设置WebStrom 鼠标点击背景颜色
-
PHPstorm 选中一个单词,高亮其它相同的单词
最近从sublime转到了PHPstorm,发现PHPstorm没有这个功能,各种百度都查不到,在sgmentfault上问也没人回答。然后试着用英文搜了下,终于在stackoverflow上找到了答案。 首先需要安装一个BrowseWordAtCaret 插件,然后Settings -> Editor -> General -> Appearance - Highlight Word at
每次双击代码想选中某个单词的时候,或者用鼠标想选中某一样的时候,vs2010就会崩溃掉
每次双击代码想选中某个单词的时候,或者用鼠标想选中某一样的时候,vs2010就会崩溃掉。事件查看发现报错如下:EventType clr20r3, P1 devenv.exe, P2 10.0.30319.1, P3 4ba1fab3, P4 microsoft.visualstudio.platform.vseditor, P5 10.0.0.0, P6 4ba1d76c, P7 1a03, P
js实现双击改变文本内容
<!DOCTYPE html> <head> <title>temp</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> function ShowElement(element) {
EmEditor让选定的单词全部高亮显示
EmEditor,工具/自定义标记/自动标记,勾选“启用自动标记”、“检索光标所在处的单词”即可
eclipse选中一个单词,其他相同的单词都会高亮显示的颜色修改
Toggle Mark Occurrences这个功能非常好用,能把选中的方法/变量在本类中全部出现的地方高亮显示,是一个非常实用的功能。但是默认颜色是灰色,非常毁眼。可以通过下面的设置更改为自己喜欢的颜色。 Window->Preferences->General->Editors->Text Editors->Annotations->Occurrences 转自:http://b
jS实现文本框在点击时变色
网页上默认的文本框老是灰色风格,看的都有点不耐烦了,用CSS和JS改变其样式是大家都喜欢用的方法,今天写了一个点击边框变色的文本框,鼠标点击文本框将要输入的时候,文本框自动变色高亮显示,非常有视觉效果,让文本框变漂亮了许多。HTML代码如下: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
优秀的网站总是注重每一个细节 鼠标选中字体颜色
一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。让我来展示给你看:
ZendStudio 高亮显示相同变量
windows-> preferences 搜索:    Mark Occurences  选中
【JavaScript】轻松更改网页背景与字体的颜色
JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色。很简单的JavaScript小程序。
Notepad++ Ctrl+W 选中当前单词
通过编辑宏的方式实现,依次操作: Ctrl + Right Ctrl + Left Ctrl + Shift + Right 保存宏并关联到快捷键即可。 参考:http://superuser.com/questions/262107/notepad-shortcut-for-selecting-whole-word
idea 关于高亮显示与选中字符串相同的内容
idea 关于高亮显示与选中字符串相同的内容,本文作为个人备忘的同时也希望可以作为大家的参考。IDEA 版本 2017.3.1 (Ultimate Edition)
Eclipse js文件选中变量名,相同变量都变色显示的设置
1.设置高亮显示的颜色: Window-->preferences-->General-->Editors-->Text Editors-->Annotations-->右边选择点击Occurrences-->设置Color 2.相同变量都变色显示 java文件的:Window-->preferences-->Java-->Editor-->Mark Occurrences"复选框全勾选
IDEA双击某个word时只选中word中某一sub word的问题解决
现象: 解决方法: 取消使用驼峰单词,如下图:
JS为选中内容添加颜色,字体,大小等等
其实说到底也就是一个在线编辑器的功能.. 今天两个同学找我,毕业设计也说了半天,我算是理解了.所到底也就是写一个在线编辑器 关键点也就是在于js选取内容,为所选的内容做各种操作. 主要为代码为: document.selection.createRange().execCommand('Bold'); 这段代码就是为选所内容设置粗体 document.selection.creat
js实现选中下拉框选项变换背景颜色
js实现选中下拉框选项变换背景颜色 function aa(){ document.bgColor="Orange"; } function change(){ var x=document.getElementById("xx").value; document.bgColor=x; } 橙色 粉色 绿色
css样式设置鼠标选中后字体颜色以及背景颜色
做后台的要涉及前台我也是醉了 一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。让我来展示给你看: css示例代码: /* webkit, opera, IE9 */ ::selection { backgr
VS2010和选中代码相同的代码的颜色设置,修改高亮颜色
使用Visual Studio 2010, 发现很难看清非活动的选中代码,研究了下,发现以下方法可以设置: 1. 菜单:工具  -》 选项  -》环境  -》字体和颜色  2. 在右边的 “显示项:” 列表框内选择 “ 突出显示的引用” 3. 在列表框右边,可以设定 “项前景色”  和 “ 项背景色” 4.截图如下: (1)                          
vs选定一个词的快捷键
就是Ctrl+Shift+W 写这篇博客不仅是想告诉你们一个快捷键,还有其他的。 我用谷歌搜“vs选定一个词的快捷键”这个关键词,找了许久,也没有满意答案。正当我准备放弃的时候,突然有个想法,何不搜搜英文网站? 我照做,在搜索栏里嵌入“vs shortcut select word”,哈哈,第一条就是我想要的结果。
浏览器获取长按选中,双击选中内容
/** * @author Dongxu Huang, Shu Ke, Wang Lei * @date 2013-07-08 */ document.addEventListener(&quot;mousemove&quot;, update_mouse_pos, true); document.addEventListener(&quot;mouseup&quot;, on_mouse_up, true); documen...
选择下拉列表的颜色,背景颜色跟着改变
html> html> head> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title> style> .sky { background-color: lightblue;
js实现动态改变菜单栏颜色(兄弟节点的知识)
例如1:图在不刷新网页的情况下(使用JavaScript改变内存),鼠标点击选项动态改变背景颜色。 代码: (HTML代码) All Java C++ C# SQL Pyhton Html CSS MySql Tool 前端
vs 如何智能感应并且自动选中关联的单词
ctrl+alt+空格 在建议完成模式和标准完成模式之间切换。
js实现<input type="color">改变背景颜色
< input type=”color” >改变北京颜色
VS2017如何把相同变量设置成高亮
我们在用VS编写程序时,有时候为了更好的理解代码,需要将相同变量高亮显示,下面我就给大家说说如何设置适合对比度较高的效果 下面是我原来的设置效果,显然相同变量高亮效果不是很明显,看的很费劲 如何设置 菜单栏里选择工具——选项 然后是环境——字体与颜色——显示项中“突出显示的引用”——更改项目“背景色”即可。 下面是我设置好的效果图 ...
去除html双击后选中有蓝色背景
css页面点击文字出现蓝色底色去掉方法 { -moz-user-select: none; /*火狐*/     -webkit-user-select: none; /*webkit浏览器*/     -ms-user-select: none; /*IE10*/     -khtml-user-select: none; /*早期浏览器*/     
HTML实现简单中英文切换(仅限小页面)
最近一个网页项目实现中英文切换,网上的各种方法众多,有谷歌和360api的自动翻译接口,自建库等等,但是我想实现的不过是在我这个页面点击切换语言即可,思路是替换原有div,只有几行代码,(ps:觉得没技术含量或者没东西的太基础了的出门右拐)如下: Language change function changeLanguage(){ document.getElem
idea 双击选中一个变量,及高亮显示相同的变量
其实idea有这个功能,只是没有背景颜色,在这里有可能是编辑区的背景颜色和选中变量的北京颜色一样, 所有我们只需要调一下背景颜色就可以了 版本:ideaIU-2018.1.5   1.   到这里就结束啦。。...
eclipse 单击选中相同单词,阴影显示
1、单击按钮“Toggle mark occurrences” 或 2、alt+shift+o
vs2010 选中所有相同代码高亮显示
VS2010 有个特性:高亮引用(Highlight Reference)。 当你在代码编辑器中选择一个变量/参数/字段声明时,所有这些东西随后用到的地方都会在编辑器中为你自动地高亮显示,这方便你快速地识别一个变量或参数是在什么地方被使用的以及是如何使用的。 如果多个地方被高亮显示了,你可以使用(Ctrl-Shift-up箭头)键组合和(Ctrl-Shift-Down箭头键组合在它们之
导航栏点击背景变色,点击另外一个之后这个背景色消失
$(document).ready(function(){      $(".dianji").each(function(){          //$(this).removeClass("hover");          $(this).click(function(){              $(".dianji").removeClass("bgcolor");
点击可选中单个单词的TextView,提供多选和其他自定义选项
点击可选中单个单词的TextView,提供多选和其他自定义选项 项目地址:SelectableTextViewProject 效果图: 功能如效果图所示,另外提供多选复制的选项,没有对TextView进行过多自定义,更像是一个封装,因此使用方式按照TextView来使用即可 提供的方法列表: 方法 xml属性 方法描述 void setEnableMu...
js改变背景颜色有感
js改变背景颜色本身并不难实现, //改变id为teamIntroduction的dom元素的背景颜色为红色 var inputBackgroundColor=document.getElementById("teamIntroduction").style.backgroundColor='red'; 但是这个过程中发现了一些问题,记录一下。 后来我把代码改成如下方式: //先获取id=team
HTML-JavaScript--单击按钮改变背景颜色
/* *Copyright (c) 2017,烟台大学计算机学院 All rights reserved. *文件名称:关于HTML的练习 *作 者:张晴晴 *完成日期:2017年11月11日 *版 本 号:v1.0 * *问题描述:HTML5-JavaScript *输入描述: 无 *程序输出: 无 */ 单击按钮改变背景颜色 function chang
vs2008 高亮 选中
http://www.baidu.com/baidu?tn=monline_5_dg&ie=utf-8&wd=vs2008+%E9%AB%98%E4%BA%AE+%E9%80%89%E4%B8%AD
html+jquery实现页面中英文切换
目的: 前端(只采用thymeleaf模板+jquery) 实现国际化由: 前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量 采用jquery赋值(维护2个模板(中,英)界面) 直接out方案:采用https://github.com/coderifous/jquery-localize/ 一个本地化插件 a jQuery plugin
javascript之单击获得单词
有时我们有这样的一个需求,对于一篇英语文章,我们想要单击来获取单词,而不是双击获取单词。经过了谷歌一番,我也大致找到了办法。废话不多说,直接上代码:   &amp;lt;html&amp;gt; &amp;lt;body&amp;gt; &amp;lt;p&amp;gt;hello how are you ?&amp;lt;/p&amp;gt;   &amp;lt;script src=&quot;js/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp
SourceInsight高亮度显示查找字符串
SourceInsight高亮度显示查找字符串
PHP根据传来的颜色自动改变背景颜色
echo ""; echo "改变背景颜色"; if($_POST[inputColor]==""){ $inputColor="ffffff"; } echo "{$_POST[inputColor]}>"; echo ""; echo "请填写html的颜色"; echo "{$_POST[inputColor]}>"; echo ""; echo ""; echo ""; echo ""
VS2010设置选中的关键字高亮(选中,查询)
http://blog.csdn.net/feihu_guest/article/details/8760902 在nopad++中,双击选中某个关键字后,在文档中所有出现该关键字的地方都会高亮,非常方便查看在那些地方有调用。 VS2010的默认颜色不够明显(尤其是将系统背景色改为 苹果绿保护色(Hue:85, Sat:90, Lum:205)或(204 232 207
js实现表格的全选,反选,删除所选行以及隔行变色
Untitled Document                                        table{                     border:#249bdb 1px solid;                     width:500px;                     border-collapse:collapse;  
用JS实现带cookies保存记录的换肤功能
用JS实现带cookies功能的换肤功能由于项目需要研究了一下换肤功能,代码简洁易懂,首先需要根据自己的皮肤主题提前把自己所写的样式放在对应名字的css文件里,然后将选择主题的点击事件保存在cookies记录里,读取cookies记录,如果记录不为空则根据记录设置皮肤,不然选择默认皮肤。 1. HTML代码 ** 换肤
设置cell选中颜色以及表格默认选中某行
1.在加载cell的地方(即 (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath里面)加上下面几句代码         [cell setBackgroundColor:CLEARCOLOR];         cell.se
bootstrap-table的onClickRow事件(点击行改变行的背景颜色和其他属性)
 需求:在bootstrap-table的表格中,点击某行改变该行的背景颜色和其他的属性。 官方文档  文档中分了option事件和jQuery事件,在这里我先用option事件完成需求,然后再用jQuery事件实现一次。之所以还要用jQuery事件实现一下是因为jQuery实现的过程有个注意点,在此记录一下。 第一部分:option事件 $(&quot;#companyTable&quot;).boo...
相关热词 c# 为空 判断 委托 c#记事本颜色 c# 系统默认声音 js中调用c#方法参数 c#引入dll文件报错 c#根据名称实例化 c#从邮件服务器获取邮件 c# 保存文件夹 c#代码打包引用 c# 压缩效率
立即提问

相似问题

3
vue如何为多页面项目配置自己的404页面以及自定义链接
15
javascript中递归实现1+2+3+4+...+100怎么实现,js递归输出结果可以用log
2
javascript里怎么在文字标签上实现颜色的选中,类似excel的格子的效果
4
javascript如何用数组实现冒泡排序的算法,不用sort函数怎么实现?
7
C# MVC5 实现HTML页面中引用的javaScript文件中的变量的初始化
10
需要c币的看这里,简单问题请教:html5种如何使用javascript实现省、市、县的下拉同步?
8
js算法 输入一篇英文文章,统计单词个数,并找出来重复的单词,并指明个数,并能替换想要替换的单词
6
javascript中怎么实现求一个数组的中位数,求中位数的方式怎么实现的呢?
2
javascript怎么实现判断页面上的链接的功能,判断链接怎么用js语言实现呢?
6
js 用str+=拼接select标签 选中状态 替换jsp静态页面下拉菜单 无法展示选中状态
9
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
7
如何实现js事件触发播放音频
1
简单javascript的问题请教,怎么利用javascrip这个工具实现表达式求值运算?
3
javascript语言怎么实现一个文本框从一个页面导入到另一个页面?
4
JavaScript原生方法如何将值传给controller?
6
在html前端页面中密码输入框,输入一个字符显示明文,过一秒后再变*号的效果如何用js实现
0
swiper.js如何实现从上往下自动滚动啊?
2
js怎么实现移动H5页面手势画圈解锁后跳转页面
2
html如何实现长英文单词换行,并且添加中划线换行符(连字符)?
1
a标签绑定下载文件的链接如何实现不刷新页面呢a标签绑定下载文件的链接如何实现不刷新页面呢