html格式代码转换为code格式能在html内显示的代码转换工具

最新推荐文章于 2022-09-21 17:22:17 发布

wangyanxin928

最新推荐文章于 2022-09-21 17:22:17 发布

阅读量2.7k

点赞数 1

分类专栏： jQuery 代码片文章标签： jquery html 转换

本文链接：https://blog.csdn.net/wangyanxin928/article/details/77943586

版权

jQuery 代码片专栏收录该内容

23 篇文章 0 订阅

订阅专栏

需要引入jquery文件与clipboard.js 文件

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <textarea name="" id="inputTxt" cols="30" rows="10" style="width: 100%;height: 150px;"></textarea>
    <input type="button" id="Transformation" value="转换成code" style="padding: 5px;margin: 20px;background-color: red;color: #ffffff;" >
    <input type="button" id="empty" value="清空输入内容" style="padding: 5px;margin: 20px;background-color:  #666666;color: #ffffff;" >

    <textarea name="" id="output" cols="30" rows="10" style="width: 100%;height: 150px;"></textarea>
    <input type="button" id="copyVal" data-clipboard-target="#output" value="复制" style="padding: 5px;margin: 20px;background-color:  #666666;color: #ffffff;" >


</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/clipboard/clipboard.min.js"></script>
<script>
    $('#Transformation').click(function (e) {
        var inputVal=$('#inputTxt').val();
        var output;
        output= inputVal.replace(/</g,'&lt;');
        output= output.replace(/>/g,'&gt;');
        $('#output').val(output);
    });
    $('#empty').click(function (e) {
        return $('#inputTxt').val('');
    });
    $("#copyVal").unbind("click").bind("click", function (e) {
        console.log('ddd');
        //复制代码功能
        var clipboard = new Clipboard('#copyVal');
        console.log(clipboard);
    });

</script>
</body>
</html>

wangyanxin928

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html格式代码转换为code格式能在html内显示的代码转换工具

需要引入jquery文件与clipboard.js 文件html>lang="en"> charset="UTF-8"> Title name="" id="inputTxt" cols="30" rows="10" style="width: 100%;height: 150px;"> type="button" id="Transformatio
复制链接

扫一扫