在以字符串开头的对象中查找元素答案

【问题标题】：Finding elements in an object that started as a string在以字符串开头的对象中查找元素
【发布时间】：2011-11-30 04:29:02
【问题描述】：

我有一个文本区域：

<p>
    Input:<br>
    <textarea name="text_input" id="text_input"></textarea>
</p>

我正在尝试将 textarea 值视为一个 jQuery 对象，以便能够找到每个超文本链接。

那个textarea有一些相关的脚本代码：

<script>
$('#text_input').change(process).keyup(process);
function process(){
    var html = $('#text_input').val();
    $(html).find("a").each(function(i,elem){
        alert('got here');
    });
}
</script>

在该文本区域中，我粘贴例如文本：

<html>
<body>
<a href="http://www.google.com/">hello</a>
</body>
</html>

问题是，alert() 永远不会触发。我错过了什么？我猜$(html) 行有问题。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

var html = $('#text_input').val();

请改用var html = $('#text_input').html();。

测试代码：

<textarea id="t123">text&lt;something more</textarea>
<script>
    window.alert($("#t123").val());
    window.alert($("#t123").html());
</script>

还要密切注意您在警报中收到的内容。

更新：

好的，不同之处在于 .html() 将引用文本区域的原始内容，而 val() 将使用输入/更改的值。

所以，这将解决问题：

$(document).ready(function(){
    $('#text_input').change(function(){
        var html = $('#text_input').val();
        var dummy = $("<div></div>").html(html);
        dummy.find("a").each(function(i, elem){
            window.alert(elem);
        });
    });
});

【讨论】：

我不同意你的观点。试用演示代码并告诉我哪里出了问题。
“.val()”方法在 jQuery 中绝对适用于在所有浏览器中检索 textarea 内容。
我同意 .val() 它的工作原理，尽管其他地方存在问题。无论如何，正如解释的那样，使用 .val() 更好，我同意这一点。
那很好！感谢您更新答案并提供示例。
是的，有趣的是 .val() 和 .html() 的区别。就像我在另一个解决方案上的 cmets 一样，我的目标是操纵 HTML 并吐出该 HTML。此解决方案的 this 是 dummy 的 HTML 等效项与原始源元素不同。

【解决方案2】：

如果您在使用操作系统菜单中的“粘贴”进行粘贴时无法触发事件，请尝试输入事件：

$('#text_input').bind('input', process);

此外，为了能够使用 jquery 解析输入内容，您可能应该将其附加到 DOM 节点：

$('#text_input').bind('input', process);
function process(){
    var html = $('#text_input').val();
    $('<div>').html(html).find('a').each(function(i, elem) {
        alert('got here');
    });
}

示例：http://jsfiddle.net/5npGM/9/

【讨论】：

【解决方案3】：

jQuery 将从您的 HTML 字符串中去除 html 和 body 元素，然后 find 函数将无法找到任何 a 元素，因为它在单个 a 元素中进行搜索。

看到这个问题 - Using jQuery to search a string of HTML

为了证明这一点，如果您将以下 JavaScript 放在文档就绪块中，它将起作用 -

$('#text_input').change(process).keyup(process);

function process() {
    var html = $('#text_input').val();
    $('<div>' + html + '</div>').find("a").each(function(i, elem) {
        alert('got here');
    });
}

演示 - http://jsfiddle.net/Y5L98/4/

【讨论】：

【解决方案4】：

把$(html).find...改成$('<div/>').append(html).find...就可以了。

http://jsfiddle.net/NQKuD/

如果您想将文本视为一个完整的 HTML 文档，您必须自己解析它，而不是让 jQuery 为您解析。这是一种方法：

function process() {
    var html = $('#text_input').val();
    var rgx = /<a [^>]*href\=\"?([^\"]+)\"?[^>]*>([^<]*)<\/a>/gi;
    var result,url,link;
    while (result = rgx.exec(html)) {
        url = result[1];
        link = result[2];
        alert('url='+url+'\nlink='+link);
    }
}

http://jsfiddle.net/NQKuD/2/

【讨论】：

几乎可以让我到达那里！我的意图是能够操纵html 中的元素，使其结构保持不变。然而，这给了我一个新对象，其中包含额外的<div/>s。甚至stackoverflow.com/questions/652763/jquery-object-to-string/… 中的技巧也会丢失我的<html><body> 标签...
恕我直言，您最初的问题并没有要求操作粘贴的 HTML 的方法——您询问了如何找到标签，以及为什么 alert() 没有触发.

【解决方案5】：

您可以创建一个不可见的 html 占位符并在其中插入 html（虽然这听起来是一种非常危险的方法，:P 但我认为没有其他方法可以使用 jquery 来解析输入文本）。

http://jsfiddle.net/y6tt7/1

<div id="placeholder" style="display:none"></div>

$("#placeholder").html(html).find("a").each(function(i,elem){
        alert('got here 2');
    }).html("");

【讨论】：

总之，您认为不可能获取整个 HTML“文档”，对其进行操作，然后以操作后的形式将文档吐出？
@eoinoc 你可以这样做，但这并不完全安全。使用目前的设置方式，您可以将 javascript 粘贴到其中，而不仅仅是将其视为文本。
谢谢约瑟夫。我可能不得不放弃获取 HTML 代码、对其进行操作并将其吐回的尝试。
@eoinoc 好吧，我希望不会。 :(你希望用它做什么？
我的第一个目标是粘贴一个 HTML 页面，并且链接都用特殊参数标记，但 HTML 的其余部分保持不变。我打算将修改后的 HTML 推送到第二个文本区域。