如何去除 javascript 中的所有 html 标签(有例外)?

2024-02-02

我长期以来一直在与这位正牌前任进行斗争,希望有人能提供帮助。基本上我有一个所见即所得字段,用户可以在其中键入格式化文本。但当然他们会复制并粘贴Word/Web/等形式。所以我有一个 JS 函数来捕获粘贴上的输入。我有一个函数可以删除文本上的所有格式,这很好,但我想让它留下像 p 和 br 这样的标签,这样它就不仅仅是一团糟了。

那里有正则表达式忍者吗?这是我到目前为止所拥有的并且有效。只需允许标签即可。

o.node.innerHTML=o.node.innerHTML.replace(/(<([^>]+)>)/ig,"");

浏览器已经有一个完美解析的 HTML 树o.node。将文档内容序列化为 HTML(使用innerHTML),尝试用正则表达式破解它(cannot可靠地解析 HTML),然后通过设置将结果重新解析回文档内容innerHTML……实在是有点逆天了。

相反,检查内部已有的元素和属性节点o.node,删除那些你不想要的,例如:

filterNodes(o.node, {p: [], br: [], a: ['href']});

定义为:

// Remove elements and attributes that do not meet a whitelist lookup of lowercase element
// name to list of lowercase attribute names.
//
function filterNodes(element, allow) {
    // Recurse into child elements
    //
    Array.fromList(element.childNodes).forEach(function(child) {
        if (child.nodeType===1) {
            filterNodes(child, allow);

            var tag= child.tagName.toLowerCase();
            if (tag in allow) {

                // Remove unwanted attributes
                //
                Array.fromList(child.attributes).forEach(function(attr) {
                    if (allow[tag].indexOf(attr.name.toLowerCase())===-1)
                       child.removeAttributeNode(attr);
                });

            } else {

                // Replace unwanted elements with their contents
                //
                while (child.firstChild)
                    element.insertBefore(child.firstChild, child);
                element.removeChild(child);
            }
        }
    });
}

// ECMAScript Fifth Edition (and JavaScript 1.6) array methods used by `filterNodes`.
// Because not all browsers have these natively yet, bodge in support if missing.
//
if (!('indexOf' in Array.prototype)) {
    Array.prototype.indexOf= function(find, ix /*opt*/) {
        for (var i= ix || 0, n= this.length; i<n; i++)
            if (i in this && this[i]===find)
                return i;
        return -1;
    };
}
if (!('forEach' in Array.prototype)) {
    Array.prototype.forEach= function(action, that /*opt*/) {
        for (var i= 0, n= this.length; i<n; i++)
            if (i in this)
                action.call(that, this[i], i, this);
    };
}

// Utility function used by filterNodes. This is really just `Array.prototype.slice()`
// except that the ECMAScript standard doesn't guarantee we're allowed to call that on
// a host object like a DOM NodeList, boo.
//
Array.fromList= function(list) {
    var array= new Array(list.length);
    for (var i= 0, n= list.length; i<n; i++)
        array[i]= list[i];
    return array;
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何去除 javascript 中的所有 html 标签(有例外)? 的相关文章

随机推荐

  • 没有 (Show (Double -> Double)) 的实例

    我有以下代码 它使用牛顿法来近似某个数字的平方根 问题是当我运行它时 我收到错误 出了什么问题 我该如何解决 newtonRootSequence Double gt Double newtonRootSequence d newtonSe
  • Google 地图地理编码 API 速率限制不正确

    我正在向我公司使用的内部工具之一添加映射功能 长话短说 我们有大约 50 个需要放置在地图上的地址的列表 我使用 Google 地图 使其成为交互式地图 然后使用 javascript API 进行地理编码和添加标记 根据谷歌的文档 htt
  • 包含 对于带有 hashbang 的页面有害吗?

    谷歌关于这个元标签的说法是 以下重要限制适用 元标记只能出现在没有哈希片段的页面中 仅有的 可能会出现在内容字段中 元标记必须出现在文档的头部 Source https developers google com webmasters aj
  • 将字符串转换为列表。 Python [string.split() 表现得很奇怪]

    temp a b c print type temp string output a b c print type output list 所以我有这个临时字符串 它基本上是字符串格式的列表 我正在尝试将其转回列表 但我不确定有什么简单的方
  • DRF SerializerMethodField如何传递参数

    有没有办法将参数传递给 Django Rest Framework SerializerMethodField 假设我有模型 class Owner models Model name models CharField max length
  • 如何指定样式表在文档中出现的顺序?

    我有几个样式组件 使用withStylesHOC 来导出它们 但我无法覆盖某些规则 因为 jss 将 mui 样式表的顺序与我的组件的样式表混合在一起 如何才能将自己的风格坚持到底 我和我的团队也偶然发现了这个问题 并设法找到了解决方案 显
  • 运算符的优先级和结合性是什么?

    C 中运算符的优先级和结合性是什么 谁定义了运算符优先级和结合性 以及它与求值顺序有何关系 https stackoverflow com q 20767745 5740428解释了这些属性如何从语法中出现 然而 我只是对所有规则的列表感兴
  • 在 Matlab 中使用“spy”为不同的数字获取不同的颜色

    当我使用间谍检查稀疏模式时 它不会将某些元素与其他元素区分开 有什么办法可以做到这一点吗 例如 假设元素等于10是红色的并且所有元素都等于9是蓝色的 我可以把这个合而为一吗spy plot 我只能更改情节的大小和样式 您可以这样做 spy
  • 为什么 chromecast 客户端向接收器应用程序声明其高度和宽度为 720p?

    为什么 chromecast 向接收方应用服务器声明其客户端高度和宽度为 720p 我正在尝试显示非视频内容 并假设我能够使用完整的 1080p 分辨率 设备向电视报告其分辨率为 1080p 60hz 但如果您查看设备上的开发人员工具 它仅
  • Angular 与 ui.bootstrap 渲染空白页面

    我使用 Yeoman 创建了一个包含 bootstrap 的 Angular 应用程序 然后 我使用 Bower 按照自述文件中的说明安装 ui bootstraphttps github com angular ui bootstrap
  • 请介绍一个 Perl 或 Ruby 的多处理库

    在Python中我们可以使用多处理模块 如果 Perl 和 Ruby 中有类似的库 你会教它吗 如果您能提供一个简短的示例 我将不胜感激 Ruby 在 Ruby 中使用多个进程 https stackoverflow com questio
  • Ios NSDictionary 数组 - 对值和键进行分组

    我有以下结果NSDictionary数组的 Bath Keynsham nsham companies Bath Midsomer Norton Keynsham companies Bath Norton Radstock Keynsha
  • 在 IIS 中托管时出现 WCF“基本”传输安全问题

    我正在尝试使用 HTTPS SSL 基本客户端凭据和WebHttp绑定 http msdn microsoft com en us library system servicemodel webhttpbinding aspx 通过在线阅读
  • 如何消除该模板的歧义?

    我有一个类 它采用大小作为模板参数 现场演示 http ideone com uPRNZH template
  • 从 URL 获取外部页面的源 DOM/HTML

    我想从 Chrome 扩展程序中的 url 下载页面的源代码 我有这样的东西 但不知道如何将文本格式化为html 或者 如果这种格式有效 如何在控制台中显示源代码 fetch https www transfermarkt com robe
  • C++ 中的虚方法调用是如何工作的?

    如何虚拟方法调用在 C 中工作 通过虚拟表 读这篇文章 http en wikipedia org wiki Virtual table http en wikipedia org wiki Virtual table 我可以在这里解释 但
  • 将参数传递给 Asynctask

    我正在使用异步任务从菜单活动中获取字符串并加载一些东西 但我是 无法这样做 我是否以正确的方式使用它并且我是否正确传递参数 请查看代码片段 谢谢 private class Setup extends AsyncTask
  • 如何在reactstrap Dropdown中设置所选项目?

    如何在reactstrap Dropdown中设置所选项目 有一个下拉示例 https reactstrap github io components dropdowns https reactstrap github io compone
  • DryIOC 事件聚合器

    我正在尝试使用 DryIOC 实现事件聚合器 我有一个事件调度程序 如下所示 public class DryIocEventDispatcher IEventDispatcher private readonly IContainer c
  • 如何去除 javascript 中的所有 html 标签(有例外)?

    我长期以来一直在与这位正牌前任进行斗争 希望有人能提供帮助 基本上我有一个所见即所得字段 用户可以在其中键入格式化文本 但当然他们会复制并粘贴Word Web 等形式 所以我有一个 JS 函数来捕获粘贴上的输入 我有一个函数可以删除文本上的