1

我想从用户输入中删除所有 html 标签。

此代码从 中删除所有 html 标记#container，除了锚点和 img 标记。

$("#container").find('*:not(a,img)').each(function() {
     $(this).replaceWith(this.innerHTML);
});

我无法将其转换为查找输入文本 .val();

$('#inputTxt').val().find('*:not(a,img)').each(function() {
    $(this).replaceWith(this.innerHTML);
});

此代码显示错误：

$input.val().find() 不是函数。

有人能帮我吗？

更新 POST

好吧，antyrat 先生给出的示例是删除任何其他标签中的所有内容，但我想要它们的内容，只需删除它们的标签。所以我像这样改变了它，它正在工作。

    var tmpElement = $( $( '#inputTxt' ).val() ); // create tmp HTML node
    tmpElement.find('*:not(a,img)').each(function() {
         $(this).replaceWith(this.innerHTML);
    });
    return tmpElement.html();

问题

上面的代码适用于以下一些输入：

  1. <div> Hello <a href="#"> I am a link </a> </div>
  2. <a href="#" ></a><div>Hello<img src="url" /></div>

但是当用户键入这样的内容时：

  1. <div><a <div ></div> href="#" ></a></div>

输出是：<a <div=""> href="#" >Another link</a>

这是jsfiddle

4

2 回答 2

2

这是因为val()方法返回输入值，而不是 jQuery 对象，并且该值没有方法find()

在您的代码中：

$(this).replaceWith(this.innerHTML);

this是对 jQuery 元素的引用，而不是 Node 所以你不能得到innerHTML.

此外，如果inputTxt是输入元素，您在其中找不到任何元素，因为它们只是纯文本。您首先需要将它们转换为 HTML，例如：

var tmpElement = $( $( '#inputTxt' ).val() ); // create tmp HTML node
tmpElement.find( '*:not(a,img)' ).remove(); // remove everything except <a> and <img> elements
$('#inputTxt').replaceWith( tmpElement ); // replace input to it's HTML content

但是您需要确保输入中包含正确的 HTML 并且至少有一个根节点。所以最好将你的 HTML 包装到容器中，<div>例如：

    var tmpElement = $( '<div>' + $( '#inputTxt' ).val() + '</div>' ); // create tmp HTML node

所以你遇到的主要问题是你试图像元素一样迭代纯字符串。

请参阅 jsFiddle 上的工作演示。

更新：

更好的事件不是删除带有内容的节点，而只是删除元素：

tmpElement.find( '*:not(a,img)' ).contents().unwrap(); // remove everything except <a> and <img> elements

更新了 jsFiddle

于 2013-11-04T19:47:53.203 回答
-1

.val()返回一个字符串，它不是一组 jquery 对象，所以.find()函数不起作用。

尝试：

$('#inputTxt').find('*:not(a,img)').each(function() {
    $(this).replaceWith($(this).val());
});
于 2013-11-04T19:49:01.557 回答