我有一个HTML文档,其中包含大约30,000个单词.
我希望能够在用户点击任何单词时执行某些操作.为了简单/概念,我只想alert()说这个词.
例如,在段落中,如果我点击"有"它应该运行alert("have").
我正在使用jQuery.
我需要建立一个评论机制,用户突出显示一段文字,点击"评论这个",然后做一些事情.Javascript代码不仅要知道所选文本(这是微不足道的),还要知道anchorOffset,以确切地知道选择文本的字符.
我正在使用在线富文本编辑器,类似于WordPress页面创建者或Stack Overflow后创建者.有人指出,有两种不同类型的在线富文本编辑器:
我正在构建第二种类型.不幸的是,<textarea>也没有使用contenteditable是HTML富文本编辑非常方便.
这个问题<textarea>(如在这里堆栈溢出使用)是你不能显示文本级语义在编辑栏.您不能只突出显示一个单词并使其变为粗体,您必须插入某种标记(例如*****bold*****).不是非常用户友好,也不是真正的"丰富"文本.
另一方面,使用contenteditable解决了这些问题但引入了控制问题.浏览器将插入各种HTML和CSS以使编辑字段看起来很好.如果你点击Enter,浏览器将插入<p>,或<div>,或<br>,或<div><br></div>...取决于浏览器.如果您粘贴从HTML复制的几个段落,您会得到大量过多的标记 - 甚至超过源HTML中的标记.例如,以下源代码:
<p>This is one paragraph!</p>
<p>This is another.</p>
Run Code Online (Sandbox Code Playgroud)
在网站上显示为:
This is one paragraph!
This is another.
Run Code Online (Sandbox Code Playgroud)
...如果你复制并粘贴到contenteditable表格中,可以给你这样的东西:
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px;
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px;
white-space: normal;">This is another.</p>
Run Code Online (Sandbox Code Playgroud)
...带来内联样式,在某些情况下还有其他HTML.
wysiwyg richedit contenteditable rich-text-editor richeditabletext
我正在尝试构建一个工具,允许人们获取单词或短语(在选择上),选择部分已完成,但不是单词部分.
当有人点击一个单词时,我需要能够得到当前的单词,我找到了这个解决方案
不幸的是,这段代码更改了所有单词并<span>为每个单词添加了一个,这导致了我身边的问题,因为我无法在文本中添加html标签(css文件可以导入或动态添加)
如果可能的话,是否有更好的方法来实现这一目标?
EX:
Lorem ipsum dolor坐下来,精致的adipistur elit.Donec auctor ante坐在amet nisl consequat volutpat.
如果我点击"坐",那么我会提醒'坐'
在HTML文档中,如何通过单击获得单词?
例如,如果我有这个:
<div id = "word">
hello world
</div>
Run Code Online (Sandbox Code Playgroud)
我希望能够点击worddiv中的任何单词并在没有选择的情况下获取它.这可能是使用JQuery吗?
我有:简单的html文本块:
<p>
The future of manned space exploration and development of space depends critically on the
creation of a dramatically more proficient propulsion architecture for in-space transportation.
A very persuasive reason for investigating the applicability of nuclear power in rockets is the
vast energy density gain of nuclear fuel when compared to chemical combustion energy...
</p>
Run Code Online (Sandbox Code Playgroud)
我想:当用户点击它时,将单词换成span.
即用户点击了载人字,而不是我应该得到的
<p>
The future of <span class="touched">manned</span> space exploration and development of space depends critically on the
creation …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用Javascript来修改现有的HTML文档,以便我可以span使用带有计数器的标记包围网页中的每个文本单词.这是一个非常具体的问题,所以我将提供一个示例案例:
<body><p>hello, <br>
change this</p>
<img src="lorempixel.com/200/200> <br></body></html>
Run Code Online (Sandbox Code Playgroud)
这应该改为:
<body><p><span id="1">hello,</span>
<br> <span id="2"> change</span><span id="3"> this</span> </p>
<br> <img src="lorempixel.com/200/200> <br></body></html>
Run Code Online (Sandbox Code Playgroud)
我在思考或regex解决方案,但他们变得非常复杂,我不知道如何忽略标签和更改文本而不完全破坏页面.
任何想法赞赏!