js replace方法处理渲染文本字符串中的br标签

今天在项目中碰到一个问题，从后端查出来的需要渲染的文本字符串中有
标签，如果是直接采用文本节点与元素节点拼接的方式，可以将br标签渲染为换行，例如

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>replaceDemo</title><script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div id="text"></div>
</body>
<script>var str = "aaaaaaaa<br>bbbbbbbbb<br>ccccccccccccccccc<br>"$("#text").html(" <h2> "+str+"</h2>");</script></html>

效果图：
这样进行渲染没有问题，但是如果需要对input或者textarea标签进行设置value时则不会渲染
标签例如：

    <textarea name="" id="texts" cols="30" rows="10"></textarea><script>var str = "aaaaaaaa<br>bbbbbbbbb<br>ccccccccccccccccc<br>";$("#texts").val(str);
</script>

效果图：

这样的话就不会渲染br标签了，需要对字符串的br标签进行一下处理。
我使用了replace方法，将自字符串的br标签替换成\n,这样就可以变成换行了。一开始的写法是

 str = str.replace('<br>','\n');$("#texts").val(str);

效果图：
发现只有第一个br标签成功了，其他的br标签没有被替换，去网上看了一下replace的用法，才发现默认是替换匹配到的第一个字符串，如果需要对所有被匹配到的字符串进行替换需要加上 g，表示全局替换。

stringObject.replace(regexp/substr,replacement)
//第一个参数就是我们要进行匹配的字符串，可以是字符串也可以是正则表达式，
//第二个就是要替换后的内容了  在这里我需要变成  '\n',//查找第一个符合的字符串进行替换。str = str.replace('<br>','\n');$("#texts").val(str);//全局查找将所有的匹配的字符串都进行替换  方法1。var reg = new RegExp('<br>','g');str = str.replace(reg,'\n');$("#texts").val(str);//全局查找将所有的匹配的字符串都进行替换  方法2。str = str.replace(/<br>/g,'\n');$("#texts").val(str);

全局替换后的效果图

js replace方法处理渲染文本字符串中的br标签相关推荐

【HTML】处理＜br＞换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法，字符串中包含HTML标签被转义的问题解决
[HTML]处理换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题解决参考文章: (1)[HTML]处理换行符 ...
html字符串自动加回车换行,【HTML】处理br换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法，字符串中包含HTML标签被转义的问题解决...
需求如下图: 追加给前台后,效果如下: 可以在源码看到: 是将后台给出来的数据,直接当作字符串给填充在了前台HTML中. 而查看浏览器编译后的HTML源码可以发现: 原来字符串中的的<> ...
JS replace()方法-字符串首字母大写
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换 ...
文本字符串中提取数据进行分析
需求在进行数据分析的时候,有时候会碰到需要从文本字符串中提取需要的数据来进行分析的情况,这种需求在网络爬虫数据分析非常常见. 比如,需要下列表格"基础薪资规则"字段中提取阶梯单量 ...
减去字符串_从文本字符串中提取指定值的6个超级技巧解读
在实际的工作中,从指定的字符串中提取指定文本也是常用的技巧之一,除了手动操作之外,下文的8种应用技巧也是必须要掌握的. 一.Left函数法.功能:从指定文本字符串的第一个字符开始,提取指定长度的字符串 ...
PHP开发小技巧①⑥—提取富文本字符串中的文本内容
综述富文本在我们平常的项目中应用已经很广泛了,并逐渐发展成了一个行业.最近在项目中遇到需要提取富文本字符串中的文本内容,本篇博文就是记述如何重富文本字符串中提取出文本内容,欢迎大家相互学习. 富文本 ...
python文本分析提取数据含义_从文本字符串中提取数据进行分析
需求在进行数据分析的时候,有时候会碰到需要从文本字符串中提取需要的数据来进行分析的情况,这种需求在网络爬虫数据分析非常常见. 比如,需要下列表格"基础薪资规则"字段中提取阶梯单量 ...
js replace方法替换变量
前言项目中遇到的场景是,需要使用replace方法去匹配变量内容并且替换,比如: let str = 'aaa likes bbb, aaa is a girl', key = 'aaa';let ...
Java黑皮书课后题第6章：*6.23（指定字符的出现次数）使用下面的方法头编写一个方法，找到一个字符串中指定字符的出现次数。编写一个测试程序，提示用户输入一个字符串以及一个字符，显示该字符出现次数
6.23(指定字符的出现次数)使用下面的方法头编写一个方法,找到一个字符串中指定字符的出现次数.编写一个测试程序,提示用户输入一个字符串以及一个字符,显示该字符出现次数题目题目描述破题代码运 ...

js replace方法处理渲染文本字符串中的br标签

js replace方法处理渲染文本字符串中的br标签相关推荐

最新文章

热门文章

js replace方法处理 渲染文本字符串中的br标签

js replace方法处理 渲染文本字符串中的br标签相关推荐

最新文章

热门文章

js replace方法处理渲染文本字符串中的br标签

js replace方法处理渲染文本字符串中的br标签相关推荐