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

最新推荐文章于 2023-02-22 16:03:04 发布

爱学习的ljz

最新推荐文章于 2023-02-22 16:03:04 发布

阅读量3.8k

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/qq_40600414/article/details/108249235

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

今天在项目中碰到一个问题，从后端查出来的需要渲染的文本字符串中有
标签，如果是直接采用文本节点与元素节点拼接的方式，可以将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);

全局替换后的效果图
在这里插入图片描述

爱学习的ljz

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
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">&l
复制链接

扫一扫