React中向标签插入自带标签的字符串

最新推荐文章于 2023-01-13 17:44:16 发布
最新推荐文章于 2023-01-13 17:44:16 发布
阅读量700 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41549657/article/details/119876705
版权

最近的一个需求是，模糊查询返回结果。在返回的结果数据中，将结果数据中与查询字段相同的部分高亮。

1.首先后端返回的模糊查询结果是一个个字符串，检测每个字符串中是否含有查询字段，如果有，则将返回结果中的查询字段   从字符串替换成带有类名的标签，给该类名设置高亮的样式，就能达到匹配高亮的效果。

2.涉及到的问题是，返回结果被替换成含有类名的标签字符串之后，再将其放到展示该结果的标签内，标签怎么识别带有类名标签的字符串呐

Vue中可以通过V-HTML实现，那么在React中呐，则可以通过dangerouslySetInnerHTML标签实现

憨逗君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【React工作记录五】如何处理数据格式字符串让它加上标签
geyaoisnice的博客
12-09 592
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 需求 今天我们公司领导找我 说这边有个需求需要你做一下 就是一个ant design table得table栏里面返回了一些数据格式 首先我们来看看数据格式 每一个人或动植物，\r\n都是由阴阳两种能量组合而成。 \r\n男人身上有51%是阳性能量 ，\r
react-autolink-text:一个React组件，用于将给定文本字符串中的URL转换为单击链接标签
05-17
一个React组件，用于将给定文本字符串中的URL转换为单击链接标签。 安装 npm install react-autolink-text 用法 import ReactDOM from 'react-dom' ; import AutoLinkText from 'react-autolink-text' ; ReactDOM...
React 替换字符串里面span的里的某些内容
04-22
1.使用replace替换字符串的某些内容，使用的是正则+ replace， 2. 前提是替换字符串里面的某些标签，也可以是多个标签，这个是在react里面的，自己可以参考然后可以动态替换成其他标签，例如li，ul都是可以的 3.字符串可以替换单个也可以替换多个的 4. 原先的想法是获取到字符串里面标签的内容再精选替换，后面发现这个方式更加麻烦，因为不是直接document.getElemengByTagName这样就可以拿到标签里面的值 5.保证有效
React-reacttabsReact标签组件
08-14
react-tabs - React标签组件
React 使用正则在字符串标签中插入组件
weixin_48845614的博客
05-04 1112
最近遇到一个需求，需要将后端返回的字符串标签中的span标签替换为组件，且渲染在页面上，字符串标签的格式如下 const str = `<p>分析发现xx街道辖区内上报商铺飞线充电事件<span class="dataItem">${"id":1,"name":"xx区X街道X事件X时间段X问题来源X数据来源的数量"}</span>起， 占街道事件总数的<span class="dataItem">${"id":5,"name":"xx区X街道X事.
React随记：React中标签体内容间加空格（其他H5框架也适用）
鸡肋佐的博客
01-13 1842
React中标签体内容间加空格
杂七杂八(一) —— React展示markdown格式字符串
qq_55643196的博客
11-26 1520
React展示markdown格式字符串至前端，marked()方法转化markdown格式字符串为HTML标签，Katex展示Latex数学公式，md-editor-rt展示含Latex数学公式的markdown格式的字符串。
React中将字符串类型的标签渲染在页面上-dangerouslySetInnerHTML
qq_60292609的博客
12-09 1822
在vue中提供了v-html可以直接将内容标签解析渲染在页面上 虽然react中没有提供像什么v-html,但是提供了一个方法dangerouslySetInnerHTML,效果和v-html一样 缺点 — XSS攻击 人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。 XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令.
jsx语法中解析字符串中含有标签样式的问题（react）
hhy1006894859的博客
05-06 1788
代码： <div dangerouslySetInnerHTML={{__html:this.textToEmoji()}}></div> this.textToEmoji()这块代码可以替换为字符串（带有html标签样式的字符串），例如：‘<divstyle="color:red;">这是红色文字</div>’ 展示效果如下： ...
react中dangerouslySetInnerHTML使用（简洁）
wwf1225的博客
10-21 693
react中dangerouslySetInnerHTML使用（简洁） 在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。 在显示时，将内容写入__html对象中即可。具体如下： <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} /> 如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法： <div dang..
React_react如何输入字符串标签，html标签
小歪博客
05-26 853
.js 字符串标签输入需要使用 dangerouslySetInnerHTML={{__html:你好输入的字符串}} .html <div id="example"></div> <script type="text/babel"> class Maa extends React.Component{ constructor(props){ super(props) this.state={ newhtml:"<p>haha&l
react中写动态标签，render方法中如何使用if else 判断
01-07
在render()中循环数据，根据数据不同展示标签不同 import React from 'react'; const quanList=[ { id:1, buy_price:1,//购买券的价格 quan_price:30,//可抵扣价格 quanName:'仅限(学习机)商品使用', on_time...
React-reactsimpletabs采用React构建的一个简单的标签组件
08-14
react-simpletabs - 采用React构建的一个简单的标签组件
react里加入字符串html，转正常页面
一头会飞的鱼
08-05 514
div dangerouslySetInnerHTML={{ __html: 内容 }} />
react（63）——通过标签的dangerouslySetInnerHTML属性，将字符串标签变为react标签
木子 旭的博客
04-18 320
1.这是一个字符串标签 const htmldiv = "<div><h1>这是h1</h1><h2>这是h2</h2><h3>这是h3</h3><div>" 2.将其通过标签的dangerouslySetInnerHTML属性，将其变成给react组件 <div dangerouslySetInnerHTML={{ __html: htmldiv }} /> 3.运行效果 import Reac
react html 控件 事件
cooledi的博客
08-12 475
1、select (onChange) Volvo Saab Opel Audi handChange (val) { console.log('selected', val.target.value); this.setState({name: val.target.value}); }
react中将带标签的字符串转义为html解析
热门推荐
milklili的博客
12-13 2万+
使用 dangerouslySetInnerHTML={{ __html: htmlString}} 范例： return ( {props.record.contents.map(value => ( ) )} )
node-v5.11.0-x86.msi
最新发布
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
react解析字符串为html标签内容
03-29
在React中，可以使用`dangerouslySetInnerHTML`属性来将字符串解析为HTML标签内容。该属性接受一个对象，其中`__html`属性的值为要解析的HTML字符串。例如： ```jsx function MyComponent() { const htmlString = '<h1>Hello, World!</h1>'; return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>; } ``` 这将在页面上渲染一个标题为"Hello, World!"的`<h1>`标签。需要注意的是，使用`dangerouslySetInnerHTML`属性可能存在安全风险，因为它允许注入任意的HTML代码。因此，应该谨慎使用，并确保输入的字符串是可信的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值