JavaScript字符串拼接包含＜/script＞

最新推荐文章于 2024-04-28 00:00:00 发布
最新推荐文章于 2024-04-28 00:00:00 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012948161/article/details/118226550
版权

由于一些原因，需要在页面JavaScript中拼接字符串，且拼接的字符串中包含了JavaScript脚本语句，比如：

var str = "<script>alert('test');</script>";

浏览器运行报错：Uncaught SyntaxError: Invalid or unexpected token。只需要将“/”转义即可：

var str = "<script>alert('test');<\/script>";
卡了个卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ⅵ JavaScript字符串
m0_61748249的博客
12-07 208
​ 目录 （一）字符串介绍 1.概念 2.创建字符串 3.字符串操作 （二）模板字符串 1.概念 2.特点 3.作用： （三）字符串常用方法 ​（四）练习
JavaScript中输出/script标签的方法
12-10
一种常见的方法是使用字符串拼接，像这样： ```javascript <script> alert('</scr' + 'ipt>'); </script> ``` 这里，我们将`<script>`字符串分割成两部分：`'</scr'`和`'ipt>'`，然后使用加号（`+`）将它们连接在...
js动态拼接＜Script＞
lyf18779011168的博客
05-28 1279
/** * 动态插入script标签 */ function createScript(url, callback) { var oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.async = true; oScript.src = url; /* ** ...
存档：字符串里面含有＜script＞＜/script＞，报错
中等偏下
09-08 757
js中字符串中含有<script></script>，老是报错，找了各种办法 例如： data () { return { code: '<template><div>{{message}}</div></template><script>export default {data() {return {message: "ok"}}}</script>' } } 解决办法
JS 合并拼接字符串 （ 5种方法 ）
最新发布
大剑师兰特的GIS世界
04-28 3012
- **加号 (+)**：简单易用，但可能影响代码可读性和性能。 - **模板字面量**：简洁直观，支持多行和嵌入表达式，是现代JavaScript中最推荐的拼接方式。 - **`concat()`**：功能较弱，不如其他方法灵活，较少使用。 - **数组 `join()`**：适用于拼接大量字符串，性能较好，但需预先收集到数组中。 - **`replace()`** 结合空正则表达式：特殊场景下的优化手段，一般不推荐常规使用。
[日常开发问题：1] 后端返回数据中因包含＜script＞等标签，导致前端显示报错
小猪-佩琪的博客
03-09 977
字符转义，后端数据包含代码，前端报错
从字符串中解析出javascript脚本
hzfu007的专栏
07-12 680
问题： 从字符串中解析出javascript脚本。 例子： var str1;//假设str1为包含javasript脚本的字符串。  var ss = "]*)>(.*?)";  var re = new RegExp(ss);  while (r = re.exec(str1)) {//假如str1包含多段脚本，那么这里可以找出没一段的内容。                 al
JS--script标签注意细节
dingbin1973的博客
11-01 209
1）在使用<script>标签嵌入js代码时，记住不要在代码中的任何地方出现</script>字符串。例如： <script type="text/javascript"> 　　function sayScript(){ 　　　　alert("</script>"); 　　} </script> 按照解析嵌入式代码的...
Javascript中拼接大量字符串的方法
12-03
首先，最基础的字符串拼接方法是使用加号（`+`）操作符。例如： ```javascript var str = "Here is line one "; str += "And line two "; str += "Finally, line three! "; ``` 这种方法简单直观，但当需要拼接的...
SpringMVC+Ajax+拼接html字符串实例代码
10-20
<script type="text/javascript"> $(function() { $("#testButton").click(function() { $.ajax({ url: "${pageContext.request.contextPath}/user/ajaxlist", type: 'GET', dataType: 'json', success: ...
JavaScript字符串对象
11-30
在JavaScript中，使用`+`运算符可以拼接字符串，但这种方式效率较低，推荐使用数组的`join()`方法来拼接字符串，因为它更高效，例如：`["j", "a", "v", "a", "s", "c", "r", "i", "p", "t"].join("")`将返回`...
javascript利用正则快速找出两个字符串的不同字符
12-11
在JavaScript中，有时候我们需要比较两个字符串的差异，找出它们之间的不同字符。正则表达式（Regular Expression）是一种强大的文本处理工具，可以有效地帮助我们完成这项任务。本文将详细介绍如何使用正则表达式来...
html通过模板字符串写入script标签
q879936814的博客
11-05 773
一般的方法我们都是用document.body.innerHtml = `` 但是经过测试，只对html有效，script不会执行。 使用document.write(``)即可解决！ 注意在模板字符串中，script标签要这么写 <script><\/script>
JavaScript拼接html字符串时截断问题
weixin_30376453的博客
12-07 217
　　在项目中碰到一个问题，就是JavaScript拼接html标签时，里面特殊字符会有些问题，比如单引号截断配对，导致后面的内容不显示或显示错误。在此记录一下。 　　下面贴一段简化的代码，若有描述不清的地方还请各位指正，共同进步。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta ...
JavaScript运行字符串的js代码
07-08 3147
运行js字符串代码的三种方法
JavaScript字符串包含
热门推荐
allway2的博客
05-09 7万+
您可以使用include（）方法，indexOf（）或正则表达式来检查JavaScript字符串是否包含字符或短语。include（）是检查字符串是否包含一个字母或一系列字母的最常用方法，并且是专门为此目的而设计的。 在任何编程语言中，检查字符串是否包含子字符串都是常见的任务。例如，假设您正在构建在线游戏。您可能需要检查用户名是否包含禁止使用的短语，以确保所有用户名都适合您的游戏。 JavaScript字符串包含 有三种方法可检查JavaScript字符串是否包含另一个字符或字符序列： in
使用script标签来做html页面的模板
不知不觉 | 笔记
09-19 1万+
html页面经常需要js动态加载html内容，一般都采取js拼接html 的方式实现，最近发现可以使用标签来做个html模板，这样更方便。并且代码可读性也增强了。 --> script html模板 * { font-family: Arial "微软雅黑"; } #addBtn{ background-color: #ff
JS动态引入js,CSS——动态创建script/link/style标签
01-15 3万+
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "tex
请分析这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="but">点击</button> <div id="div1"></div> <script> init(); function init(){ var div1=document.getElementById("div1"); but.onclick=clickHeadler; } function clickHeadler(){ var size=random(101.20); var color="#"; for(i=0;i<6;i++){ color+=parseInt(random(16)).toString(16); } var str="<div style='"; str+="width:"+size+"px;"; str+="height:"+size+"px;"; str+="background:"+color+";"; str+="position:absolute;" str+="left:"+random(1000)+"px;"; str+="top:"+random(1000)+"px;"; str+="'>"+"</div>"; div1.innerHTML+=(str); } function random(a,b){ if(b===undefined) b=0; return parseInt(Math.random()*(a-b)+b); } </script> </body> </html>
06-07
这段代码实现了一个随机生成彩色方块的功能，点击按钮时会在指定范围内随机生成不同颜色、大小、位置的方块，并添加到页面上。 代码分析： 1. HTML 部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="but">点击</button> <div id="div1"></div> <script> // ... </script> </body> </html> ``` 这段 HTML 代码包含一个按钮和一个空的 div 容器，用于显示生成的方块。 2. JavaScript 部分： ```javascript function init() { var div1 = document.getElementById("div1"); but.onclick = clickHeadler; } function clickHeadler() { var size = random(101.20); var color = "#"; for (i = 0; i < 6; i++) { color += parseInt(random(16)).toString(16); } var str = "<div style='"; str += "width:" + size + "px;"; str += "height:" + size + "px;"; str += "background:" + color + ";"; str += "position:absolute;" str += "left:" + random(1000) + "px;"; str += "top:" + random(1000) + "px;"; str += "'>" + "</div>"; div1.innerHTML += (str); } function random(a, b) { if (b === undefined) b = 0; return parseInt(Math.random() * (a - b) + b); } init(); ``` 这段 JavaScript 代码分为三部分： - `init()` 函数：用于初始化页面，获取 div 容器的元素并为按钮添加点击事件。 - `clickHeadler()` 函数：为按钮点击事件的回调函数，随机生成方块的大小、颜色和位置，并将其添加到 div 容器中。 - `random()` 函数：用于生成指定范围内的随机整数。 在 `clickHeadler()` 函数中，通过随机生成方块的大小、颜色和位置等样式，将其拼接成一个字符串，并通过 div 容器的 innerHTML 属性将该字符串添加到 div 容器中，从而实现在指定范围内随机生成方块的功能。 需要注意的是，生成的方块是绝对定位的，因此需要在 CSS 样式中设置 div 容器的 position 属性为 relative 或 absolute。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值