Question

我想在文本框中显示HTML内容，但我被卡住了。这是我的代码，当我将文本显示到标签时工作正常。但它不适用于文本框。

HTML code：

<div id="showDiv"></div>

JavaScript代码：

function myfun(){
    var item="<span class="kwcat">results in <b>(.*?)</b></span>";
    var div2 = document.createElement('div');
    div2.setAttribute("id", "myid");
    div2.setAttribute("class","inner");
    value2= replaceAll(item, '<','&lt;');
    value2=replaceAll(value2, '>','&gt;');

    var comp= '<div>';  
    comp += '<label >';
    comp += "Heading: ";
    comp += '</label>';

    /* comp += '<input type="text" value=' + value2 + '>'; */

    comp += '<label>';
    comp += value2;
    comp +='</label>';
    comp += '</div>';
    div2.innerHTML = comp;
    showDiv.appendChild(div2);
}
function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

我评论的这句话是我想要的。我哪里错了？

Answer 1

comp += '<input type="text" value="'+ value2 +'">';

function myfun(){
    var item="<span class=\"kwcat\">results in <b>(.*?)</b></span>";
    var div2 = document.createElement('div');
    div2.setAttribute('id', item);
    div2.setAttribute('class','inner');
    value2= replaceAll(item, '<','&lt;');
    value2=replaceAll(value2, '>','&gt;');

    var comp= '<div>';  
    comp += '<label>';
    comp += "Heading: ";
    comp += '</label>';

    comp += '<input type="text" value="' + value2 + '">';

    comp += '<label>';
    comp += value2;
    comp +='</label>';
    comp += '</div>';
    div2.innerHTML = comp;
    showDiv.appendChild(div2);
}
function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}
 
myfun();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="showDiv"></div>

注意： - 为什么不使用文本区域。因为将HTML粘贴到文本区域是一种诽谤的方式。

Answer 2

将输入值包含在引号中

function myfun(){
 var item="<span class=\"kwcat\">results in <b>(.*?)</b></span>";
 var div2 = document.createElement('div');
 div2.setAttribute("id", "myid");
 div2.setAttribute("class","inner");
 value2= replaceAll(item, '<','&lt;');
 value2=replaceAll(value2, '>','&gt;');

 var  comp= '<div>'+  
       '<label>Heading:</label>'+
       '<textarea>'+ value2 + '</textarea>'+
       '<label>'+value2+'</label>'+
       '</div>';

 div2.innerHTML = comp;
 showDiv.appendChild(div2);
}

您的功能应如上所示

Answer 3

你应该将值包装在引号

中

comp += '<input type="text" value="' + value2 + '">';

Answer 4

对双引号进行编码，将＆＃34; 替换为＆＃34;

value2 = replaceAll（value2，＆＃39;＆＃34;＆＃39;，＆＃39;＆＃34;＆＃39;）;

用双引号

comp += <input type="text" value="' + value2 + '">';

现在您的输入字段值与项目变量的值相同

javascript-如何在文本框中显示html内容

4 个答案: