我正在尝试包括的功能,将使用户能够突出显示文本,并有该文本返回。我还想返回该文本在#textcontainer div中的位置。
我的问题:如果用户在下面的文本中突出显示第二个'and‘,位置将等于indexOf中的第一个'and’而不是第二个。如何将其更改为position返回第二个'and‘(突出显示的那个)的位置?
<div id = 'textcontainer'>
and second third and
</div>
// beginning of highlight js
当单击按钮时,我正在尝试检测光标的当前位置。但是,我的脚本只能根据文本检测光标的位置,不包括html元素。如何使这个函数也检测和计数html元素?下面的例子。
html
<div>This is a text</div> <!-- If cursor is at after the word 'is',
position should be 7 -->
<div><ul><li>This is text with ul and
我使用这个简单的Javascript代码来检索在网页上选择的文本:
var userselection = window.getSelection(); //user selection will be a Selection-Object
var rangeObject = userselection.getRangeAt(0);
如果选择了文本,则代码可以正常工作。如果我只是点击可以选择的文本,我也会得到一个range对象,它会像预期的那样折叠起来。
但是如果我既不选择也不点击,Firefox会抛出这个错误:
uncaught exception: [Exception... "
我正在尝试找到我选择的起始点的x-y位置。我已经尝试使用rangy position.js.js(),并且还包含了它所需的支持js文件。
以下是我在我的页面上包含的脚本。
<script type="text/javascript">
function showSelectionPosition() {
var wholeSelRectEl, startSelEl, endSelEl;
// Draw an element representing the whole selection rectangle
我有一个带有许多p(段落)标记的ePub Book XHTML页面。
现在,我通过JS中的以下函数获得了关于body标签的选择文本索引:
var fullString = document.getElementsByTagName("body")[0].textContent;
if (window.getSelection)
{
var range = window.getSelection ();
var startPosition = fullString.search(range)
我正在开发HTML和JS中的一个标记编辑器,它以前使用过textarea,但由于它的局限性,我最近开始将它移到一个可内容的div中,尝试了很多次,但我无法让它工作,我只需要一个基本的函数来在选择的周围插入标记**,但是内容可编辑的div似乎有问题,有人知道如何修复吗?
function editorInsertFormatting(txtarea, text) {
var selectStart = txtarea.selectionStart;
var selectEnd = txtarea.selectionEnd;
var scrollPos = txtarea.scroll
我一直在研究如何允许访问者选择包装在<p>标记中的多个文本部分来突出显示它们,然后单击一个按钮删除所有突出显示。
通过将classList添加到创建的<span>元素中,选定的文本突出显示得很好。
如果用户选择与突出显示的文本重叠的文本,则Uncaught DOMException: Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.
删除classList会产生空跨度的分段文本。
这是我的代码,但如果覆盖突出显示的文本,则会出现错误。
错误是:
Uncaught :在‘Range’上执行'surroundContents‘失败:区域部分选择了一个非文本节点。
JS
function surroundSelection() {
var span = document.createElement("span");
span.setAttribute('class', 'hlt')
if (window.getSelection) {
var sel = window.getSelectio
我需要解决这个问题...因为这非常烦人,因为它每1000毫秒就会发生一次!
下面是完整的代码:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function insertTextAtCursor() {
var sel, range, html;
if (window.getSelection) {
se
我正在尝试写一个简单的CMS,用户可以在内容可编辑的DIV中添加新的段落。另外,所有段落的id都必须重新编号。我用jquery完成了这段代码:
<div class="wrap" contenteditable="true">
<p class="paragraph" id="parg1" onclick="createNewP('parg1');">
Press ENTER at the end of text - works!</p>
$("#contenteditable").keydown(function(e) {
var last = false;
if (e.keyCode == 13) {
if (e.ctrlKey) {
let brNode = document.createElement('br');
let range = window.getSelection().getRangeAt(0);
if (!range.endContaine
我正在使用document.getSelection()选择一些文本。我想知道所选范围包含什么类型的元素(我特别想知道它是否是一个锚标记)。
var selection = document.getSelection();
var range = selection.getRangeAt(0);
因此,我可以得到范围,但我如何知道什么元素在这个范围内?乐于使用普通的js或jQuery。
编辑:
以下是我想出的:
var updateLink = function(url) {
var selection = document.getSelection();
var range
在从网站复制文本时,我使用以下JS代码向剪贴板添加额外的informationLINK:
$(document).on('copy', function(e)
{
var sel = window.getSelection();
if(typeof short_url =='undefined'){
if(window.location.hash=="")
{
va
我在中找到了一段非常酷的代码,可以捕获用户在div中突出显示的所有文本。但是,在我的示例中,我希望实际存储div中选择的所有元素的元素ids。我可以通过操作以下示例(基于)的输出来做到这一点,但我希望有一种更优雅的方法来直接检索所选的元素?
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.ra
我正在尝试创建一个WYSIWYG编辑器。现在,我们可以将文本对齐到左、中、右。我想添加如果用户高亮一些文本,并点击粗体或斜体按钮。我想大胆一点。
我得到的突出显示的文本如下
const getHighlightedText = () => {
let text = '';
if (window.getSelection) {
text = window.getSelection().toString();
} else if (
document.selection &&
document.selection.type
我正在做一个简单的网页应用程序,让用户选择文本并用黄色突出显示(或者任何颜色,无关紧要)。这是我到目前为止所知道的:
function replaceSelectedText() {
var sel, range;
var replacementText, spanTag;
if (window.getSelection) {
replacementText = window.getSelection().toString();
spanTa
如何使用dart:html获取当前所选内容的文本或内部html?我使用div的事件作为开始:
<div on-mouseup="{{on_mouseup}}">
void on_mouseup(MouseEvent e, var detail, DivElement src) {
final selection = window.getSelection();
// do somthing
// ..
// final selectedText = ..;
window.alert("Selected text is $selecte
我正在检测html文档中长按(触摸事件)的单词。但在长时间的按下,我得到了原生文本选择器。我尝试通过CSS禁用用户选择,如下所示,但它导致抛出错误。
html {
-webkit-user-select: none;
}
错误:
Uncaught IndexSizeError: Index or size was negative, or greater than the allowed value.
代码:
<body onload="init()">
<p id="book-content">
我已经读过类似的问题,比如,但是我仍然找不到任何解决方案。
HTML
<div id="main" contenteditable="true"> </div>
<button id="addLine">Add a line</button>
JS
var func_add_line = function() {
var div = document.createElement("div"),
texte = document.createTextNode(
我在做一个网络编辑。
我的代码运行良好,但是<br>标记消失了。
这是我的密码:
$(document).on('click', '#go_span', function(e) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
var replace_text = sel.toString();
range = sel.getRangeAt(0);
我正在写一个关于靶场物体的测试。我的代码类似于下面的代码。
Test = function () {};
Test.prototype.test = function () {
if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
// then some code;
} else if (document.selection) {
range = document.selection.createRange();
/