如何去除 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 标签(有例外)? 的相关文章

  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • JavaScript 中的埃拉托斯特尼筛法对大量数据无限运行

    我一直在尝试写埃拉托斯特尼筛法 http en wikipedia org wiki Sieve of EratosthenesJavaScript 中的算法 基本上我只是按照以下步骤操作 创建从 2 到 n 1 的连续整数列表 令第一个素
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 如何为俚语和表情符号构建正则表达式 (regex)

    我需要构建一个正则表达式来匹配俚语 即 lol lmao imo 等 和表情符号 即 P 等 我按照以下示例进行操作http www coderanch com t 497238 java java Regular Expression D
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea

随机推荐

  • 没有 (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 函数来捕获粘贴上的输入 我有一个函数可以删除文本上的