.html() .text() .val() 的差別與前端html編解碼

Posted on Edited on In Views: Disqus:

 

一、.val()

 

Get：

.val()

Set：

.val( Value value )

.val( Function function )

 

1、val()通常被用於input、select、textarea。

 

2、通常回傳該元素的內文，如以select元素為例，

可複選的話則回傳為一內文陣列。

程式範例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
        p {
            color: red;
            margin: 4px;
        }

        b {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <p></p>

    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <script>
        function displayVals() {
            var singleValues = $("#single").val();
            var multipleValues = $("#multiple").val() || [];
            $("p").html("<b>Single:</b> " + singleValues +
              " <b>Multiple:</b> " + multipleValues.join(", "));
        }

        $("select").change(displayVals);
        displayVals();
    </script>

</body>
</html>

3、val(value)可用來設定值，但只限於input、select、textarea元素

程式範例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
        body {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <br>
    <input type="checkbox" name="checkboxname" value="check1"> check1
    <input type="checkbox" name="checkboxname" value="check2"> check2
    <input type="radio" name="r" value="radio1"> radio1
    <input type="radio" name="r" value="radio2"> radio2

    <script>
        $("#single").val("Single2");
        $("#multiple").val(["Multiple2", "Multiple3"]);
        $("input").val(["check1", "check2", "radio1"]);
    </script>

</body>
</html>

 

4、.val()與取屬性值value結果一樣

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
    <input type="text" id="txtCreate" name="txtCreate" value="bbb">

    <p id="val">val</p>
    <p id="value">value</p>

    <script>
        $("input").keyup(function myfunction() {
            $("#val").text($("input").val());
            $("#value").text($("input")[0].value);
        });
    </script>
</body>
</html>

唯需注意使用value屬性時需先看一下selector型態，再取值

 

二、.text()

 

Get：

.text()

Set：

.text( Text text )

.text( Function function )

 

1、其操作方式與val()相異，不能操作於input、select、textarea

2、通常回傳該元素的內文。

3、使用text()前須先指定從何開始組起。

4、使用text()之後他會把該元素裡的文字通通都轉成不帶格式的純文字(拿掉html)，

不管裡面包著多少層元素都會被組合成一字串，

該字串的每一層組合會插入一個空白作分隔，同層不插入空白。

範例程式：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>text demo</title>
    <style>
        p {
            color: blue;
            margin: 8px;
        }

        b {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div class="demo-container">
        <div class="demo-box">Demonstration Box</div>
        <ul>
            <li>list item 1</li>
            <li>list <strong>item</strong> 2</li>
        </ul>
    </div>

    <p></p>

    <script>
        var str = $("div:first").text();
        $("p:last").html(str);
    </script>

</body>
</html>

5、另外text()也可以用來設定文字

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>text demo</title>
    <style>
        p {
            color: blue;
            margin: 8px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <p>Test Paragraph.</p>

    <script>
        $("p").text("<b>Some</b> new text.");
    </script>

</body>
</html>


此程式為在p tag裡面放入「<b>Some</b> new text.」文字

 

三、.html()

取得或設定一元素的html原始碼。

 

Get：

.html()

Set：

.html( HtmlString htmlString )

.html( Function function )

 

可以把字串標記轉成html呈現(解碼)

例：$("p").html("<b>Single:</b>");

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>text demo</title>
    <style>
        p {
            color: blue;
            margin: 8px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <p>Test Paragraph.</p>

    <script>
        $("p").html("<b>Some</b> new text.");
    </script>

</body>
</html>


html解碼在實際應用上常常會用到下面方法

var decoded = $("<div/>").html(encodedStr).text();

當使用html()解碼後，再使用text()回傳字串給decoded

 

也可以把html轉成純tag字串(編碼)

例：$(this).html();

當把html轉成純tag字串時還算直覺，

但再一次把純tag字串做轉換時則會將那些HTML Entities編碼成Entity Name。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>text demo</title>
    <style>
        p {
            color: blue;
            margin: 8px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <p><b>Test Paragraph.</b></p>
    <p id="output"></p>
    <p id="output2"></p>

    <script>
        var a = $("p").html();
        $("#output").text(a);

        var b = $("#output").html();
        $("#output2").text(b);
    </script>

</body>
</html>

 

參考資料：

http://api.jquery.com/val/

http://api.jquery.com/text/

http://api.jquery.com/html/

HTML Entities or ASCII Characters