使用 html 格式化 JavaScript 对象的输出

Question

我正在寻找一种方法来格式化 JS 对象的输出。我试图在 PersonD 中使用 html，但它会打印 html 和文本。解决此问题的最佳方法是什么？

<html>
<head>
<title>Extension Search</title>
</head>
<body>
    <div>
    <p>
        Extension Search
    </p>
    </div>
    <p>
    <form autocomplete="off">
        <input id="thisSearch" type="text" placeholder="enter name">
        <button id="linkToJS">Run</button>
        <textarea id="output" name="output" wrap="hard" rows="10" readonly>
</textarea>
        <br><br>
    </form>
    </p>
</body>

<script type="text/javascript">

        var extensionList = {

            PersonA: 'This is person A ext_100',
            PersonB: 'This is person B ext_200',
            PersonC: 'This is person C ext_300 & PersonC Cell Phone ####',
            PersonD: ' \ <b>This is person D ext_400 <br> PersonD Cell Phone ####</b> \ ',

        };

        document.addEventListener('DOMContentLoaded', function() {
            var link = 
document.getElementById('linkToJS').addEventListener("click", returnLookUp);
        });


        var returnLookUp = function(e) {
            e.preventDefault();
            var getInfo = document.getElementById("thisSearch");
            document.getElementById("output").value = 
extensionList[thisSearch.value];
        }
</script>

</html>

验收标准 使用 html 格式化 JavaScript 对象的输出。

如 "PersonD" 所示，我想使用 html 将我的输出格式化为文本区域。根据以下回复，它看起来不像是一个选项。 Can I embed HTML formatting inside of a <textarea> tag?

我尝试打印到 div 但没有成功。 Can I embed HTML formatting inside of a <textarea> tag?

<body>
    <div>
    <p>
        Extension Search
    </p>
    </div>
    <p>
    <form autocomplete="off">
        <input id="thisSearch" type="text" placeholder="enter name">
        <button id="linkToJS">Run</button>
        <br><br>
    </form>
    <div id="output" name="output"></div>
    </p>
</body>

<script type="text/javascript">

        var extensionList = {

            PersonA: 'This is person A ext_100',
            PersonB: 'This is person B ext_200',
            PersonC: 'This is person C ext_300 & PersonC Cell Phone ####',
            PersonD: ' \ <b>This is person D ext_400 <br> PersonD Cell Phone ####</b> \ ',

        };


        document.addEventListener('DOMContentLoaded', function() {
            var link = 
document.getElementById('linkToJS').addEventListener("click", returnLookUp);
        });


        var returnLookUp = function(e) {
            e.preventDefault();
            var getInfo = document.getElementById("thisSearch");
            document.getElementById("output").value = 
extensionList[thisSearch.value];
        }
</script>

Answer 1

如果您问是否可以在 <textarea> 中格式化文本，那么不可以。您可以有文本和空格。从技术上讲，您也可以换行。

如果您能详细描述一下您实际想要完成的目标，也许这里有人可以帮助您。不过现在，简单的答案是不允许使用格式丰富的文本。

如果您只想将文本放入 <div>，使用 javascript，使用其 .innerHTML 属性并设置内部 HTML到您的 HTML 字符串。

使用 html 格式化 JavaScript 对象的输出

Use html to format the output from a JavaScript object

html

javascript

format

textarea

output