Question

假设我有一个contentEditable div，用户可以编辑和更改其中的文本和元素。如何使用javascript随意更改此div中的选择？通过“更改”我并不是指“更改用户选择的内容”，我的意思是实际更改选择的。然后，用户应该可以键入选择内容，将其替换为其他内容。

这应该考虑到我可能想要跨元素选择文本。例如：

<p>Some text <span>goes</span> here.</p>

我可能想要选择“一些文字去”或<p>内的所有内容。

这只需要在Safari / Webkit中使用。

提前致谢。作为本地代码开发人员，我发现DOM和Javascript一般非常令人沮丧。

Answer 1

只是为了详细回答我自己的问题，所以任何寻找类似事物的人都不必去寻找其他地方......

我最终使用的代码是这样的：

var range = document.createRange();
range.setStart( <get the node the selection starts in>, <char offset in that node> );
range.setEnd( <get the node the selection ends in>, <char offset in that node> ); 

window.getSelection().removeAllRanges();
window.getSelection().addRange(range);

非常感谢James Black指出我正确的方向。

Answer 2

您可以使用document.getElementById('your_text_id').setSelectionRange(start, end);，然后使用Math.random()生成start和end的随机数

Answer 3

除非您需要自己编写，否则您可能需要查看tinyMCE，http://tinymce.moxiecode.com/，因为它是一个很好的WYSIWYG编辑器。

为了做到这一点，你可能想看看这样的事情： http://codingtricks.blogspot.com/2009/03/javascript-select-partial-text-in-div.html

这些也可能有所帮助： JavaScript ranging gone wrong https://developer.mozilla.org/en/DOM/window.getSelection

您要做的事情会很复杂，因为您需要选择所选区域，删除所有标签，然后将所需标签放入所选区域。

Answer 4

虽然@Lucas的答案很好，但是有很多缺失会让你成功使用它。选择开始的节点必须是确切的节点，而不是父节点。在我们的例子中，我们试图将一些文本放入TextAngular控件中，然后选择看起来像____的文本，这样用户就可以填充空白＆＃34;。

我们的输入是订单<p>Some text goes here: _____</p>或

的html

<p>Some partial goes here
<ul>
    <li>Option 1</li>
    <li>_____</li>
</ul>

为了使这个工作，我们必须写一些东西来找到正确元素中的下划线

function find_(node) {
    var i, n;
    // return the node with the _'s
    for(i=0; i < node.childNodes.length; ++i) {
        n = node.childNodes[i];
        console.debug(n);
        if(n.textContent) {
            console.debug(n, n.textContent);
            if(n.textContent.search(/___+/) > 0) {
                return n;
            }
        }
        if(n.childNodes) {
            console.debug(n, n.childNodes);
            n = find_(n);
            if(n) {
                return n;
            }
        }
    }
    return null;
}

所以最后，找到满足<get the node the selection starts in>的节点比简单的句子让我相信要多得多。

在<ul>案例中。包含____的节点是li节点的firstChild。

我已将此放在这里以帮助其他需要这样做的人，而不知道他们为什么会收到错误消息

IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 65.

当问题出现时，他们只是在查看错误的节点。

如何使用javascript在页面上选择任意文本？

4 个答案: