Question

我有一个textarea：

<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>

在那个textarea中，我粘贴了例如文本：

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

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

Answer 1

将$(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/

Answer 2

var html = $('#text_input').val();＆lt; - 这是错误的

改为使用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);
        });
    });
});

Answer 3

如果在操作系统菜单中使用“粘贴”粘贴时触发事件时遇到问题，请尝试输入事件：

$('#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/

Answer 4

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/

Answer 5

你可以创建一个不可见的html占位符并在那里插入html（这听起来像一个非常危险的方法，但是：但是我没有看到使用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("");

查找以字符串形式开头的对象中的元素

5 个答案: