js4-knowledge-points
/
learn-JavaScript
/
ES5中的trim()方法.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>trim()</title>
</head>

<body>
    <input type="text"><button>点击</button>
    <p></p>
    <script>
        // trim 方法去除字符串两边的空格
        let str = "     str.trim()去除两边的空格     ";
        console.log("有空格：" + str)
        let str2 = str.trim();
        console.log("没有空格:" + str2)
        // 实例应用：
        let input = document.querySelector('input'),
            btn = document.querySelector('button'),
            p = document.querySelector('p');
        btn.onclick = function () {
            var str = input.value.trim();
            if (str === '') {
                // alert("输入内容为空！");
                console.log("输入内容为空！")
            } else {
                console.log("去除空格前的字符串：" + input.value)
                console.log("去除空格后的字符串：" + str)
                console.log("去除空格前的字符串长度：" + input.value.length)
                console.log("去除空格后的字符串长度：" + str.length)
                p.innerHTML = str;
            }
        };
    </script>
</body>

</html>