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

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

javascript html

使用html格式化JavaScript对象的输出,javascript,html,format,output,textarea,Javascript,Html,Format,Output,Textarea,我正在寻找一种格式化JS对象输出的方法。我试图在PersonD中使用html，但它会将html与文本一起打印。解决这个问题的最佳方式是什么 <html> <head> <title>Extension Search</title> </head> <body> <div> <p> Extension Search </p> </div&

我正在寻找一种格式化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>


扩展搜索

扩展搜索


跑




变量扩展列表={
人物角色：'这是一个外接100'的人，
人员B：“这是人员B分机200”，
PersonC:“这是person C ext_300和PersonC手机######”，
PersonD:“\这是person D分机400
PersonD手机”，
};
document.addEventListener（'DOMContentLoaded'，function（）{
变量链接=
document.getElementById（'linkToJS'）。addEventListener（“单击”，返回查找）；
});
var returnLookUp=函数（e）{
e、 预防默认值（）；
var getInfo=document.getElementById（“此搜索”）；
document.getElementById（“输出”）。值=
extensionList[thisSearch.value]；
}

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

如“PersonD”所示，我希望使用html将我的输出格式化为文本区域。根据以下响应，它看起来不像一个选项。

我试图打印到一个div，但没有任何运气。



扩展搜索


跑




变量扩展列表={
人物角色：'这是一个外接100'的人，
人员B：“这是人员B分机200”，
PersonC:“这是person C ext_300和PersonC手机######”，
PersonD:“\这是person D分机400
PersonD手机”，
};
document.addEventListener（'DOMContentLoaded'，function（）{
变量链接=
document.getElementById（'linkToJS'）。addEventListener（“单击”，返回查找）；
});
var returnLookUp=函数（e）{
e、 预防默认值（）；
var getInfo=document.getElementById（“此搜索”）；
document.getElementById（“输出”）。值=
extensionList[thisSearch.value]；
}

如果您询问是否可以格式化

中的文本，则不可以。您可以使用文本和空格。从技术上讲，你也可以换行

如果你能多描述一下你真正想要完成的事情，这里可能有人会帮你。但就目前而言，简单的答案是，格式丰富的文本是不允许的

如果您只想使用javascript将文本放入

，请使用其.innerHTML属性并将内部HTML设置为HTML字符串。

问题是什么？我正在寻找一种格式化JS对象输出的方法。我试图在PersonD中使用html，但它会将html与文本一起打印。文本是否需要进入文本区域？你能把它放在页面上的a中吗？也许不完全相关，但有一些不好的做法

这个搜索似乎只是突然出现在某个地方。虽然它是在窗口
中定义的（作为id元素），但您应该使用getInfo
。更相关的是，在第二个代码段中，您正在设置div
的值，但是，value
是div的自定义属性，请改用innerHTML
。您需要编辑问题以包含预期结果。目前，这里没有任何问题，也没有任何迹象表明“使用html格式化JavaScript对象的输出”应该是什么样子。“如果您询问是否可以格式化中的文本，那么不，您不能。”？
<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>