天道酬勤,学无止境

如何使用jQuery选择文本节点?(How do I select text nodes with jQuery?)

问题

我想获取一个元素的所有后代文本节点,作为jQuery集合。 最好的方法是什么?

回答1

jQuery对此没有方便的功能。 您需要将contents()仅提供子节点但包括文本节点)与find() ,后者将提供所有后代元素,但不提供文本节点。 这是我想出的:

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

注意:如果您使用的是jQuery 1.7或更早版本,则上面的代码将不起作用。 要解决此问题,请用andSelf()替换addBack()。 andSelf()从1.8开始不推荐使用addBack()

与纯DOM方法相比,这种方法效率低下,并且必须为jQuery的content()函数的重载提供一个丑陋的解决方法(感谢注释中的@rabidsnail指出),因此这是使用简单递归的非jQuery解决方案功能。 includeWhitespaceNodes参数控制输出中是否包含空格文本节点(在jQuery中,它们会自动过滤掉)。

更新:修复了includeWhitespaceNodes虚假时的错误。

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);
回答2

Jauco在评论中发布了一个很好的解决方案,因此我将其复制到此处:

$(elem)
  .contents()
  .filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  });
回答3
$('body').find('*').contents().filter(function () { return this.nodeType === 3; });
回答4

jQuery.contents()可与jQuery.filter一起使用以查找所有子文本节点。 稍作改动,您就可以找到孙子文本节点。 无需递归:

 $(function() { var $textNodes = $("#test, #test *").contents().filter(function() { return this.nodeType === Node.TEXT_NODE; }); /* * for testing */ $textNodes.each(function() { console.log(this); }); });
 div { margin-left: 1em; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="test"> child text 1<br> child text 2 <div> grandchild text 1 <div>grand-grandchild text 1</div> grandchild text 2 </div> child text 3<br> child text 4 </div>

jsFiddle

回答5

我得到了很多带有可接受的过滤器功能的空文本节点。 如果您只想选择包含非空格的文本节点,请尝试将条件条件的nodeValue添加到您的filter函数中,例如简单的$.trim(this.nodevalue) !== ''

$('element')
    .contents()
    .filter(function(){
        return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
    });

http://jsfiddle.net/ptp6m97v/

或者,为了避免出现内容看起来像空白但不是空白的奇怪情况(例如,软连字符&shy;字符,换行符\n ,制表符等),您可以尝试使用正则表达式。 例如, \S将匹配所有非空白字符:

$('element')
        .contents()
        .filter(function(){
            return this.nodeType === 3 && /\S/.test(this.nodeValue);
        });
回答6

如果可以假设所有子级都是元素节点或文本节点,那么这就是一种解决方案。

要将所有子文本节点作为jquery集合:

$('selector').clone().children().remove().end().contents();

要获取删除了非文本子元素的原始元素的副本,请执行以下操作:

$('selector').clone().children().remove().end();
回答7

由于某些原因, contents()对我不起作用,所以如果它对您不起作用,这是我做的一个解决方案,我创建了jQuery.fn.descendants ,可以选择是否包含文本节点

用法


获取所有后代,包括文本节点和元素节点

jQuery('body').descendants('all');

获取所有仅返回文本节点的后代

jQuery('body').descendants(true);

获取所有仅返回元素节点的后代

jQuery('body').descendants();

Coffeescript原文

jQuery.fn.descendants = ( textNodes ) ->

    # if textNodes is 'all' then textNodes and elementNodes are allowed
    # if textNodes if true then only textNodes will be returned
    # if textNodes is not provided as an argument then only element nodes
    # will be returned

    allowedTypes = if textNodes is 'all' then [1,3] else if textNodes then [3] else [1]

    # nodes we find
    nodes = []


    dig = (node) ->

        # loop through children
        for child in node.childNodes

            # push child to collection if has allowed type
            nodes.push(child) if child.nodeType in allowedTypes

            # dig through child if has children
            dig child if child.childNodes.length


    # loop and dig through nodes in the current
    # jQuery object
    dig node for node in this


    # wrap with jQuery
    return jQuery(nodes)

插入Javascript版本

var __indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++){if(t in this&&this[t]===e)return t}return-1}; /* indexOf polyfill ends here*/ jQuery.fn.descendants=function(e){var t,n,r,i,s,o;t=e==="all"?[1,3]:e?[3]:[1];i=[];n=function(e){var r,s,o,u,a,f;u=e.childNodes;f=[];for(s=0,o=u.length;s<o;s++){r=u[s];if(a=r.nodeType,__indexOf.call(t,a)>=0){i.push(r)}if(r.childNodes.length){f.push(n(r))}else{f.push(void 0)}}return f};for(s=0,o=this.length;s<o;s++){r=this[s];n(r)}return jQuery(i)}

未缩小的Javascript版本:http://pastebin.com/cX3jMfuD

这是跨浏览器,代码中包含一个小的Array.indexOf

回答8

也可以这样完成:

var textContents = $(document.getElementById("ElementId").childNodes).filter(function(){
        return this.nodeType == 3;
});

上面的代码从给定元素的直接子级子节点中过滤textNodes。

回答9

如果要剥离所有标签,请尝试此操作

功能:

String.prototype.stripTags=function(){
var rtag=/<.*?[^>]>/g;
return this.replace(rtag,'');
}

用法:

var newText=$('selector').html().stripTags();
回答10

对我来说,普通的老式.contents()似乎可以返回文本节点,只需要小心选择器,以便您知道它们将是文本节点。

例如,这将表中所有TD的文本内容都包装了pre标记,并且没有问题。

jQuery("#resultTable td").content().wrap("<pre/>")
回答11

我遇到了同样的问题,并通过以下方法解决了问题:

代码:

$.fn.nextNode = function(){
  var contents = $(this).parent().contents();
  return contents.get(contents.index(this)+1);
}

用法:

$('#my_id').nextNode();

就像next() ,还返回文本节点。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 选择元素中的文本(类似于用鼠标突出显示)(Selecting text in an element (akin to highlighting with your mouse))
    问题 我希望用户单击链接,然后在另一个元素(而不是输入)中选择HTML文本。 “选择”是指您将鼠标拖到文本上方来选择文本的方式。 这一直是研究的负担,因为每个人都用其他术语谈论“选择”或“突出显示”。 这可能吗? 到目前为止,我的代码: HTML: <a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a> <code id="xhtml-code">Some Code here </code> JS: function SelectText(element) { $("#" + element).select(); } 我是否遗漏了明显地明显的东西? 回答1 普通Javascript function selectText(node) { node = document.getElementById(node); if (document.body.createTextRange) { const range = document.body.createTextRange(); range.moveToElementText(node); range.select(); } else if (window.getSelection) { const selection = window
  • 如何更改元素的文本而不更改其子元素?(How can I change an element's text without changing its child elements?)
    问题 我想动态更新元素的文本: <div> **text to change** <someChild> text that should not change </someChild> <someChild> text that should not change </someChild> </div> 我是jQuery的新手,因此此任务对我来说似乎是一个很大的挑战。 有人可以指出我要使用的功能/选择器吗? 如果可能的话,我想在不为需要更改的文本添加新容器的情况下执行此操作。 回答1 Mark使用jQuery有更好的解决方案,但是您也可以使用常规JavaScript做到这一点。 在Javascript中, childNodes属性为您提供元素的所有子节点,包括文本节点。 因此,如果您知道要更改的文本始终是元素中的第一件事,那么可以使用以下HTML格式: <div id="your_div"> **text to change** <p> text that should not change </p> <p> text that should not change </p> </div> 您可以这样做: var your_div = document.getElementById('your_div'); var text_to_change = your_div
  • 获取contentEditable插入符号索引位置(Get contentEditable caret index position)
    问题 我在如何设置contentEditable元素中的光标或插入符号索引位置方面找到了很多很好的,跨浏览器的答案,但是却没有关于如何获取或找到其索引的答案... 我想做的是知道keyup上该div内插入符号的索引。 因此,当用户键入文本时,我随时可以知道它在contentEditable元素内的光标索引。 编辑:我正在寻找div内容(文本)内的索引,而不是光标坐标。 <div id="contentBox" contentEditable="true"></div> $('#contentbox').keyup(function() { // ... ? }); 回答1 以下代码假定: 在可编辑的<div>始终只有一个文本节点,而没有其他节点可编辑的div没有将CSS white-space属性设置为pre 如果您需要更通用的方法来处理带有嵌套元素的内容,请尝试以下答案: https://stackoverflow.com/a/4812022/96100 代码: function getCaretPosition(editableDiv) { var caretPos = 0, sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel
  • 使用.text()仅检索未嵌套在子标记中的文本(Using .text() to retrieve only text not nested in child tags)
    问题 如果我有这样的html: <li id="listItem"> This is some text <span id="firstSpan">First span text</span> <span id="secondSpan">Second span text</span> </li> 我正在尝试使用.text()仅检索字符串“ This is some text”,但是如果我要说$('#list-item').text() ,则会得到“ This is some text”。 textSecond span text”。 有没有一种方法可以获取(并可能通过.text("")类的东西删除)标签中的自由文本,而不是其子标签中的文本? HTML不是我编写的,因此这是我必须使用的。 我知道在编写html时仅将文本包装在标签中会很简单,但是html是预先编写的。 回答1 我喜欢基于此处找到的clone()方法的可重用实现,以仅获取父元素内的文本。 提供的代码易于参考: $("#foo") .clone() //clone the element .children() //select all the children .remove() //remove all the children .end() //again go back to selected element
  • 在JavaScript中删除DOM节点的所有子元素(Remove all child elements of a DOM node in JavaScript)
    问题 我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: <p id="foo"> <span>hello</span> <div>world</div> </p> 我抓住了我想要的节点,如下所示: var myNode = document.getElementById("foo"); 我怎样才能删除foo的子代,只剩下<p id="foo"></p> ? 我可以做: myNode.childNodes = new Array(); 还是我应该使用removeElement某种组合? 我希望答案直接是DOM; 如果您还提供jQuery答案以及仅DOM答案,则需要加分。 回答1 选项1 A:清除innerHTML 。 这种方法很简单,但可能会不适用于高性能应用程序,因为它会调用浏览器的HTML解析器(尽管浏览器可能会针对该值为空字符串的情况进行优化)。 doFoo.onclick = () => { const myNode = document.getElementById("foo"); myNode.innerHTML = ''; } <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span> </div>
  • HTMLCollection,NodeList和对象数组之间的区别(Difference between HTMLCollection, NodeLists, and arrays of objects)
    问题 当涉及到DOM时,我一直对HTMLCollections,对象和数组感到困惑。 例如... document.getElementsByTagName("td")和$("td")之间有什么区别? $("#myTable")和$("td")是对象(jQuery对象)。 为什么console.log还会在它们旁边显示DOM元素的数组,而它们不是对象,也不是数组? 什么是难以捉摸的“ NodeLists”,以及如何选择一个? 还请提供以下脚本的任何解释。 谢谢 [123,"abc",321,"cba"]=[123,"abc",321,"cba"] {123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...} Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...} document.links= HTMLCollection[a #, a #] document.getElementById("myTable")= <table id="myTable"> document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr
  • 用jQuery突出显示一个单词(Highlight a word with jQuery)
    问题 我基本上需要在文本块中突出显示一个特定的单词。 例如,假装我想在文本中突出显示“ dolor”一词: <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <p> Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris. </p> 我如何将以上内容转换为如下形式: <p> Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit. </p> <p> Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris. </p> jQuery有可能吗? 编辑:正如塞巴斯蒂安指出的那样,如果没有jQuery,这是完全有可能的-但我希望可以有一种特殊的jQuery方法
  • 我需要哪个选择器通过其文本选择一个选项?(Which selector do I need to select an option by its text?)
    问题 我需要检查<select>是否具有其文本等于特定值的选项。 例如,如果有一个<option value="123">abc</option> ,那么我将寻找“ abc”。 有选择器可以做到这一点吗? 我正在寻找类似于$('#select option[value="123"]'); 但对于文字。 回答1 这可以帮助: $('#test').find('option[text="B"]').val(); 演示小提琴 这将为您提供带有文本B的选项,而不是具有包含B文本的选项。 希望这可以帮助 对于最新版本的jQuery,上述操作无效。 正如下面的Quandary所评论的,这是适用于jQuery 1.9.1的内容: $('#test option').filter(function () { return $(this).html() == "B"; }).val(); 更新的小提琴 回答2 您可以使用:contains()选择器来选择包含特定文本的元素。 例如: $('#mySelect option:contains(abc)') 要检查给定的<select>元素是否具有这样的选项,请使用.has()方法: if (mySelect.has('option:contains(abc)').length) 要查找包含此类选项的所有<select> ,请使用:has()选择器: $
  • 一次单击即可选择所有DIV文本(Select all DIV text with single mouse click)
    问题 当用户单击DIV时如何突出显示/选择DIV标签的内容...这个想法是所有文本都被突出显示/选择,因此用户不需要用鼠标手动突出显示文本,并且可能错过了一点文字? 例如,假设我们有一个DIV,如下所示: <div id="selectable">http://example.com/page.htm</div> ...并且当用户单击该URL中的任何URL时,整个URL文本将突出显示,以便他们可以轻松地在浏览器中四处拖动所选文本,或单击鼠标右键复制完整的URL。 谢谢! 回答1 function selectText(containerid) { if (document.selection) { // IE var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().removeAllRanges()
  • 您如何在PHP中解析和处理HTML / XML?(How do you parse and process HTML/XML in PHP?)
    问题 如何解析HTML / XML并从中提取信息? 回答1 本机XML扩展 我更喜欢使用本机XML扩展之一,因为它们与PHP捆绑在一起,通常比所有第3方库都快,并为我提供了所需的标记控制权。 判断 DOM扩展使您可以使用PHP 5通过DOM API通过XML文档进行操作。它是W3C的Document Object Model Core Level 3的实现,它是一种平台和语言无关的界面,允许程序和脚本动态访问和更新。文件的内容,结构和样式。 DOM能够解析和修改真实世界(损坏的)HTML,并且可以执行XPath查询。 它基于libxml。 使用DOM需要花一些时间,但是IMO值得花时间。 由于DOM是与语言无关的接口,因此您会发现许多语言的实现,因此,如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在Gradinging A element的href属性中找到,而一般的概念性概述可以在php中的DOMDocument中找到。 StackOverflow上已广泛讨论了如何使用DOM扩展,因此,如果您选择使用它,则可以确保可以通过搜索/浏览Stack Overflow来解决所遇到的大多数问题。 XMLReader XMLReader扩展是XML提取解析器。 阅读器充当光标,在文档流上前进,并在途中的每个节点处停止。 像DOM一样
  • 您如何在PHP中解析和处理HTML / XML?(How do you parse and process HTML/XML in PHP?)
    问题 如何解析HTML / XML并从中提取信息? 回答1 本机XML扩展 我更喜欢使用本机XML扩展之一,因为它们与PHP捆绑在一起,通常比所有第3方库都快,并为我提供了所需的所有标记控制权。 判断 DOM扩展使您可以通过带有PHP 5的DOM API通过XML文档进行操作。它是W3C的Document Object Model Core Level 3的实现,它是一种与平台和语言无关的界面,允许程序和脚本动态访问和更新。文件的内容,结构和样式。 DOM能够解析和修改真实世界(损坏的)HTML,并且可以执行XPath查询。 它基于libxml。 使用DOM需要花一些时间,但是IMO值得花时间。 由于DOM是与语言无关的接口,因此您会发现许多语言的实现,因此,如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 可以在Grabbing A元素的href属性中找到一个基本的用法示例,并且可以在php的DOMDocument中找到常规的概念概述。 如何使用DOM扩展已在StackOverflow上进行了广泛介绍,因此,如果您选择使用它,则可以确保可以通过搜索/浏览Stack Overflow来解决所遇到的大多数问题。 XMLReader XMLReader扩展是XML提取解析器。 阅读器充当光标,在文档流上前进,并在途中的每个节点处停止。 像DOM一样
  • 您如何在PHP中解析和处理HTML / XML?(How do you parse and process HTML/XML in PHP?)
    问题 如何解析HTML / XML并从中提取信息? 回答1 本机XML扩展 我更喜欢使用本机XML扩展之一,因为它们与PHP捆绑在一起,通常比所有第3方库都快,并为我提供了所需的所有标记控制权。 判断 DOM扩展使您可以使用PHP 5通过DOM API通过XML文档进行操作。它是W3C的Document Object Model Core Level 3的实现,它是一种平台和语言无关的界面,允许程序和脚本动态访问和更新。文件的内容,结构和样式。 DOM能够解析和修改真实世界(损坏的)HTML,并且可以执行XPath查询。 它基于libxml。 使用DOM需要花一些时间,但是IMO值得花时间。 由于DOM是与语言无关的接口,因此您会发现许多语言的实现,因此,如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在Gradinging A element的href属性中找到,而一般的概念性概述可以在php中的DOMDocument中找到。 如何使用DOM扩展已在StackOverflow上进行了广泛介绍,因此,如果您选择使用它,则可以确保可以通过搜索/浏览Stack Overflow来解决所遇到的大多数问题。 XMLReader XMLReader扩展是XML提取解析器。 阅读器充当游标在文档流上前进并在途中的每个节点处停止的光标。
  • 使用jQuery重置多阶段表单(Resetting a multi-stage form with jQuery)
    问题 我有一个带有标准重置按钮的表格,其代码如下: <input type="reset" class="button standard" value="Clear" /> 麻烦的是,该表单属于多阶段排序,因此,如果用户填写一个阶段然后稍后返回,则单击“清除”按钮时,各个字段的“已记住”值将不会重置。 我在想,附加一个jQuery函数以遍历所有字段并“手动”清除它们将达到目的。 我已经在表单中使用了jQuery,但只是起步较快,因此不知道如何执行此操作,除了通过ID分别引用每个字段外,这似乎不太有效。 TIA寻求任何帮助。 回答1 于2012年3月更新。 所以,在我最初回答这个问题的两年后,我回来看看它已经变成了一个大混乱。 我觉得现在是时候该重提它了,使我的回答真正正确了,因为它是最受欢迎的+接受的。 记录下来,Titi的答案是错误的,因为它不是原始张贴者所要求的-可以使用本机reset()方法重置表单是正确的,但是这个问题是试图清除已记住的表单如果以这种方式重设,将保留在表格中的值。 这就是为什么需要“手动”重置的原因。 我认为大多数人最终都从Google搜索中遇到了这个问题,并且确实在寻找reset()方法,但是它不适用于OP所谈论的特定情况。 我的原始答案是这样的: // not correct, use answer below $(':input','#myform')
  • 如何使用JavaScript复制到剪贴板?(How do I copy to the clipboard in JavaScript?)
    问题 将文本复制到剪贴板(多浏览器)的最佳方法是什么? 我试过了: function copyToClipboard(text) { if (window.clipboardData) { // Internet Explorer window.clipboardData.setData("Text", text); } else { unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper); clipboardHelper.copyString(text); } } 但是在Internet Explorer中,它给出了语法错误。 在Firefox中,它说unsafeWindow未定义。 不使用Flash的一个好窍门: Trello如何访问用户的剪贴板? 回答1 概述 有三种主要的浏览器API可复制到剪贴板: 异步剪贴板API [navigator.clipboard.writeText]
  • 如何更改页面上加载的HTML内容(How to change the HTML content as it's loading on the page)
    问题 我在我们的网站上进行A / B测试,我的大部分工作都放在一个JS文件中,该文件在呈现任何其他内容之前(但在jQuery加载后有时会派上用场)加载到页面顶部。 以更改H1标签的非常简单的示例为例,我通常会在头部注入一种样式,以将H1不透明度设置为0,然后在DOMContentLoaded上,我将操纵H1内容,然后将不透明度设置为1。是为了避免更改之前发生旧内容的闪烁-将整个对象隐藏起来更加美观。 我已经开始研究MutationObserver API。 在更改用户可以打开的覆盖对话框中的内容之前,我曾经使用过此方法,这似乎是一种很酷的方法,我想知道是否有人在第一次加载文档时设法使用MutationObserver来监听文档/在第一次呈现之前和DOMContentLoaded之前解析并更改文档? 然后,这种方法可以让我更改H1内容,而不必隐藏,更改和显示它。 到目前为止,我已经尝试过但失败了,最后只是阅读了有关即将过时的突变事件,并想知道我是否正在尝试做一些不可能的事情。 但是我们(不是我)设法在火星上放了一个机器人,所以我希望我能解决这个问题。 因此,可以在页面加载/解析时使用MutationObservers即时更改HTML内容吗? 感谢您的帮助或指点。 问候,尼克 回答1 MDN上的文档有一个通用的不完整示例,没有展示常见的陷阱。 突变摘要库提供了易于使用的包装器
  • jQuery从下拉列表中获取选定的选项(jQuery Get Selected Option From Dropdown)
    问题 通常,我使用$("#id").val()返回所选选项的值,但是这次不起作用。 所选标签的ID为aioConceptName HTML代码 <label>Name</label> <input type="text" name="name" /> <select id="aioConceptName"> <option>choose io</option> <option>roma</option> <option>totti</option> </select> 回答1 对于下拉选项,您可能想要这样的东西: var conceptName = $('#aioConceptName').find(":selected").text(); val()不能解决问题的原因是,单击选项不会更改下拉菜单的值,它只是将:selected属性添加到作为下拉菜单的子项的selected选项中。 回答2 设置每个选项的值 <select id="aioConceptName"> <option value="0">choose io</option> <option value="1">roma</option> <option value="2">totti</option> </select> $('#aioConceptName').val()无效,因为.val()返回value属性。
  • 在contentEditable上设置光标位置(Set cursor position on contentEditable <div>)
    问题 我正在使用一种确定的跨浏览器解决方案,当contentEditable ='on'<div>重新获得焦点时,将光标/插入位置设置为最后一个已知位置。 内容可编辑div的默认功能似乎是每次单击时都将插入号/光标移动到div中文本的开头。 我相信当他们离开div的焦点时,我必须将当前光标的位置存储在一个变量中,然后当他们再次将焦点放在内部时,将其重新设置,但是我无法将它们放在一起或找到一个工作的对象代码示例。 如果有人有任何想法,工作代码段或示例,我将很高兴见到他们。 我实际上还没有任何代码,但这是我所拥有的: <script type="text/javascript"> // jQuery $(document).ready(function() { $('#area').focus(function() { .. } // focus I would imagine I need. } </script> <div id="area" contentEditable="true"></div> PS。 我已经尝试了此资源,但它似乎不适用于<div>。 也许仅用于文本区域(如何将光标移动到可编辑内容的末尾) 回答1 这与基于标准的浏览器兼容,但在IE中可能会失败。 我提供它作为起点。 IE不支持DOM Range。 var editable = document
  • 如何清除使用JavaScript输入的HTML文件?(How can I clear an HTML file input with JavaScript?)
    问题 我想清除表单中的文件输入。 我知道将源设置为相同的方法...但是该方法不会删除所选的文件路径。 注意:我希望避免重新加载页面,重置表单或执行AJAX调用。 这可能吗? 回答1 如何删除该节点,创建一个具有相同名称的新节点? 回答2 有3种方法可以清除javascript的文件输入: 将value属性设置为空或null。 适用于IE11 +和其他现代浏览器。 创建一个新的文件输入元素并替换旧的。 缺点是您将丢失事件侦听器和expando属性。 通过form.reset()方法重置所有者表单。 为了避免影响同一所有者表单中的其他输入元素,我们可以创建一个新的空表单并将文件输入元素附加到此新表单中并进行重置。 这种方式适用于所有浏览器。 我写了一个javascript函数。 演示: http : //jsbin.com/muhipoye/1/ function clearInputFile(f){ if(f.value){ try{ f.value = ''; //for IE11, latest Chrome/Firefox/Opera... }catch(err){ } if(f.value){ //for IE5 ~ IE10 var form = document.createElement('form'), parentNode = f.parentNode, ref =
  • 如何使用JavaScript从文本框控件中获取选定的文本(How to get selected text from textbox control with javascript)
    问题 我有一个文本框和一个链接按钮。 当我写一些文本时,然后选择其中一些,然后单击链接按钮,则必须在文本框中显示从消息框中选择的文本。 我该怎么做? 当我单击下面的文本框的“提交”按钮时,消息框必须显示Lorem ipsum。 因为在该区域中选择了“ Lorem ipsum”。 如果我从页面中选择任何文本并单击“提交”按钮,则该文本有效,但如果我将文本写入文本框并使其成功,则无效。 因为当我单击到另一个空间时,文本框的选择被取消。 现在的问题是,当我从文本框中选择一个文本并单击任何其他控件或空格时,仍必须选择选定的文本。 怎么做? 回答1 好的,这是我的代码: function ShowSelection() { var textComponent = document.getElementById('Editor'); var selectedText; if (textComponent.selectionStart !== undefined) {// Standards Compliant Version var startPos = textComponent.selectionStart; var endPos = textComponent.selectionEnd; selectedText = textComponent.value.substring
  • 我可以将jQuery与Node.js一起使用吗?(Can I use jQuery with Node.js?)
    问题 是否可以使用Node.js在服务器端使用jQuery选择器/ DOM操作? 回答1 更新( jsdom 6月27日) :似乎对jsdom进行了重大更新,导致原来的答案不再起作用。 我找到了这个答案,解释了现在如何使用jsdom 。 我已经在下面复制了相关代码。 var jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } = new JSDOM(); const { document } = (new JSDOM('')).window; global.document = document; var $ = jQuery = require('jquery')(window); 注意:原始答案没有提到您需要使用npm install jsdom 更新(2013年末) :官方jQuery团队最终在npm上接管了jquery软件包的管理: npm install jquery 然后: require("jsdom").env("", function (err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); }); 回答2 是的,可以使用我创建的名为nodeQuery的库