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

最新推荐文章于 2024-05-15 10:08:08 发布

原创最新推荐文章于 2024-05-15 10:08:08 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html 转换

jQuery 代码片专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个简单的网页应用，该应用使用HTML与JavaScript实现文本到HTML安全代码的转换功能，并提供了复制转换后代码的功能。用户可以在文本框中输入文本，点击按钮将文本中的<和>符号转换为HTML安全字符，防止XSS攻击。

需要引入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>